导言

今天又学习到了一个知识点
写的一般,不喜勿喷

<div id="app">
    <div class="hello">{{fullName}}</div>
    <button @click="setNameFun">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                firstName : 'z',
                lastName : 's'
            }
        },
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            }
        },
        methods: {
            setNameFun() {
                this.firstName = 'h';
                this.lastName = 'w'
            }
        },
        watch: {
            firstName(newVal,oldVal) {
               setTimeout(() => {
                   if(newVal) {
                       console.log(newVal)
                   }
               },1000)
            }
        },
    })
</script>

计算属性 computed

1. 支持缓存, 只有当依赖的数据发生改变时,才会重新进行计算
2. 不支持异步
3. 适用于需要依赖其他数据的计算的值

监听属性 watch

1. 不支持缓存 , 数据改变时 ,会直接触发相应的回调函数
2. watch 支持异步

区别

1. watch 与 computed 的最大区别是, 当需要在数据变化时执行异步操作或者开销较大的操作时, watch 是最有效的