1.计算属性computed与监听属性watch的区别
1>计算属性是依赖的属性值改变后，将计算属性的返回值作为最新结果，所以，里面不能异步的返回结果，不可以写异步逻辑。
2>监听属性是监听的值改变后会重新执行函数，将一个值重新赋值作为返回结果，可以写异步逻辑。
示例如下：
<div id="app">
<div>
{{msg}}
</div>
<div>
{{newValue}}
</div>
<button @click="handleClick">点击</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
newValue: ''
},
methods: {
handleClick () {
this.msg = 'hello1'
}
},
watch: {
msg (newValue) {
setTimeout(() => {
this.newValue = newValue
}, 1000);
}
}
})
</script>
结果：
let vm = new Vue({ el: '#app', data: { msg: 'hello', temp: '' }, computed: { newValue () { if (this.temp) { // 不能写异步 // setTimeout(() => { // return msg // }, 1000); return this.msg } else { return this.temp } } }, methods: { handleClick () { this.msg = 'hello1' this.temp = 'hello1' } } }) let vm = new Vue({ el: '#app', data: { msg: 'hello', temp: '' }, computed: { newValue () { if (this.temp) { // 不能写异步 // setTimeout(() => { // return msg // }, 1000); return this.msg } else { return this.temp } } }, methods: { handleClick () { this.msg = 'hello1' this.temp = 'hello1' } } }) let vm = new Vue({ el: '#app', data: { msg: 'hello', temp: '' }, computed: { newValue () { if (this.temp) { // 不能写异步 // setTimeout(() => { // return msg // }, 1000); return this.msg } else { return this.temp } } }, methods: { handleClick () { this.msg = 'hello1' this.temp = 'hello1' } } }) <script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
temp: ''
},
computed: {
newValue () {
if (this.temp) {
// 不能写异步
// setTimeout(() => {
// return msg
// }, 1000);
return this.msg
} else {
return this.temp
}
}
},
methods: {
handleClick () {
this.msg = 'hello1'
this.temp = 'hello1'
}
}
})
</script>
输出结果是一样的，但是不支持一秒后输出。
2.计算属性computed与methods方法的区别
1>计算属性是基于所依赖的数据是否更新，如果相关的响应式依赖有改变才会更新，而方法是每次都会执行。
2>计算属性是存在缓存的，如果数据没有发生改变，每次取值都是从缓存里取值。
示例如下：
<div id="app"></div>
<button onclick="fun1()">点击执行fun1</button>
<script>
var vm = new Vue({
el:'#app',
data:{
num:8
},
computed:{
getnum1(){
console.log(new Date())
return this.num-1
}
},
methods:{
getnum2(){
console.log(new Date())
return this.num-1
}
}
});
function fun1(params) {
setInterval(() => {
// console.log(vm.getnum1)
console.log(vm.getnum2())
}, 1000);
}
</script>
打印结果为：
3.计算属性与数据存储data属性的区别
计算属性也是对数据进行存储的，调用方式是一样的，例如
data中的数据：{{num}}
computed中的数据：{{getNum}}
注意：计算属性是对数据进行业务逻辑的处理，也可以对计算属性中的数据进行监听。
