计算属性computed与监视属性watch属性：data：{}中的key是名，value是值计算属性：由已知属性得到

属性：data：{}中的key是名，value是值

计算属性：由已知属性得到新的属性，放在computed中，要求将计算过程写成对象

<body>
    <div id="root">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        {{fullName}}
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data: {
            firstName: "zhang",
            lastName: 'san'
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + '-' + this.lastName
                }
            }
        }
    })
</script>

计算属性最终会出现再vm上，直接读取使用即可，get中的this是vm

有人读取fullName时，get就会被调用，返回值就作为fullName的值

初次读取fullName时或者所依赖的数据发生变化时，get才会调用，要是不变的话就直接用缓存里面的（methods没有缓存机制）

若是fullName需要修改时，set被调用

当你的计算属性只读不改时，可以简写

        computed: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        }

将fullName直接写成getter

监视属性：watch

        watch: {
            isHot: {
                immediate: true, //初始化时调用一下
                handler(newValue, oldValue) {
                    console.log("被修改了");
                }
            }
            
        另一种写法
        vm.$watch('isHot',{
                immedi...
             

})

data、computed中的属性都可以监视

深度监视

data：{numbers：{a：1}}，想要监视a，watch中就写‘numbers.a’:{ handler()}

对象中key的值时字符串，所有要加引号

vue中的watch默认不监视多级结构属性变化（性能）,若是想要监视多级结构中所有属性的变化，deep:true

vue本身是可以的

            numbers: {
                deep: true,
                handler() {
                    console.log("被修改了");
                } }

简写，再不需要配置项的情况下（deep、immediate）

不写=>（this指向问题）

        watch: {
            isHot(newValue, old) {
                console.log();
            }
        }

当计算属性和监视属性都可以实现时，优先使用computed

但是watch可以异步执行任务swtTime(()=>{},1000)//这里必须写成箭头

所有被Vue管理的函数，最好写成普通函数，这样this才是 vm 或组件实例对象

所有不被Vue管理的函数（定时器，ajax，promise），最好写成箭头，this指向vm或组件实例对象