Vue中wacth监听以及computed计算属性的使用

1、wacth监听属性

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch，遍历 watch 对象的每一个 属性。

 <div id='app'>
        <input type="text" v-model="first">
        +
        <input type="text" v-model="last">
        <button @click="add()">=</button>
        <input type="text" v-model="name">

    </div>

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                first: '',
                last: '',
                name: '',
                // obj: {
                //     name: '123'
                // }
            },
            methods: {
                add() {
                // this.name = Number(this.first) + Number(this.last)
                // this.name = this.first + this.last
                // return  this.name
                }
            },
            // 监听
            // 一个对象，键是需要观察的表达式，值是对应回调函数。
            // 值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 watch，遍历 watch 对象的每一个 属性。

            watch: {
                // 常规方法监听
                first: function (val) {
                    // console.log(val);
                },
                last: function (val) {
                    // console.log(val);
                },
                // name:function(val){
                //     val = this.first + this.last
                //     console.log(val);
                // },
                // oldVal参数保存上一个newVal的数字
                name: function (newVal, oldVal) {
                    // console.log('newVal',newVal);  //1
                    // console.log('oldVal',oldVal);  //1111
                },
                // 用handler方法监听  把需要监听的值（first）看作对象 然后利用handler方法监听
                first: {
                    handler(newVal, oldVal) {
                        // console.log(newVal);    //新值
                        // console.log(oldVal);    //旧值
                    },
                // 如果我们需要在最初绑定值的时侯，也执行监听函数，则就需要用到immediate属性。 
                // 当设置immediate属性为true时，无论值是否发生改变，时刻都会监听；
                // 当设置immediate属性为false时，常规用法，只有值发生改变才会监听。
                    immediate: true
                },
             
                //deep 深度监听
                //监听普通变量的变化可以使用以上两种方法，但是要监听变量值是某对象的时候，则不起作用。

               },
            }
            </script>

2、计算属性

computed计算属性：只能对最终结果进行运算功能，只计算一次，具有缓存功能，能实现计算属性与普通属性之间的双向绑定。

computed的作用:

1.减少模板中的计算逻辑
2.能够进行数据缓存
3.响应式数据依赖固定的数据类型
一般格式为

computed: {
    "属性名": {
        set(值){
        },
        get() {
            return 
        }
    }
}
//computed简写  当只使用get函数的使用简写形式
computed: {
	属性名() {

	}
}