Vue知识点
1.计算属性和方法的区别
计算属性只有在它的相关依赖发生改变时才会重新求值。
方法会在每次触发重新渲染时，总会再次执行，获取新的值。
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
})
以上代码在控制台只要不改变message的值，怎么输出reversedMessage都是!boonuR，但reversedMessage2每次输出都是重新计算渲染的。
2.计算属性和侦听属性的区别
侦听属性是实时观察和响应 Vue 实例上的数据变动，但是当一些数据需要随着其它数据变动而变动时，就可能会写很多个watch导致滥用。
但是计算属性做数据关联变动时就会简洁很多。
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
// 这里即监听firstName，又监听lastName
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
},
computed: {
// 这里只需要在用着的时候重新计算即可
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
重新计算开销很大的话,选computed;
不希望有缓存的选methods
3.侦听器的特点
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
4.数组和对象更新检测方法
由于 JavaScript 的限制，Vue 不能检测数组和对象属性的添加或删除。
可以实现页面和数组实时更新的检测方法：
-
Vue.set(vm.items, indexOfItem, newValue)或vm.$set(vm.items, indexOfItem, newValue) -
vm.items.splice(indexOfItem, 1, newValue)一个参数是代表截取数组的长度，返回截取的元素；
两个参数代表从哪个位置截取几个元素，返回截取的元素；
三个参数代表从哪个位置截取几个元素，并追加什么元素，返回截取的元素。
可以实现页面和对象实时更新的检测方法：
1)添加单个对象的属性和值
Vue.set(object, key, value) 或 vm.$set(object, key, value)
2)添加多个对象的属性和值
vm.objName = Object.assign({}, vm.objName, {
key1: value1,
key2: value2,
...
})
5.如何修改端口号
image.png
6.如何跨域请求
image.png
7.默认执行类似jQ的trigger功能
trigger的替代使用生命周期mounted替代
image.png
详情参考：关于vue2触发点击事件
8.如何获取组件的实例化对象
如果是在父附件中,可以通过ref
<component1 ref="ref1"></component>
在父组件中 this.$refs.ref1
在子组件中通过 this.$parent获取父组件
9.Ajax、fetch 、 axios 的区别
ajax:
最早出现的发送后端请求技术，属于原始js，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
axios:
axios不是原生JS的，需要进行安装，它不但可以在客户端使用，也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于promise对象的。
fetch:
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
