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.如何修改端口号
![](https://img.haomeiwen.com/i3732356/b2918850e9e0c142.png)
6.如何跨域请求
![](https://img.haomeiwen.com/i3732356/b0ae38f0cf8a7eda.png)
7.默认执行类似jQ的trigger功能
trigger的替代使用生命周期mounted替代
![](https://img.haomeiwen.com/i3732356/5683a8060c2ea982.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对象。
网友评论