Vue计算属性与监视属性实现方法详解【vue入门】

目录

• 一、计算属性
• 1、插值语法实现
• 2、通过方法实现
• 3、通过计算属性
• 二、监视属性
• 三、深度监视

    

        姓：


        名：


        姓名：{{fistName + lastName}}
    

    

        姓：


        名：


        
        姓名：{{fullName()}}
    

    new Vue({
        el:"#root",
        data:{
            fistName:"张",
            lastName:"三"
        },
        methods: {
            fullName(){
                return this.fistName + this.lastName;
            }
        },
    })

    

        姓：


        名：


        姓名：{{fullName}}
    

const vm = new Vue({
        el:"#root",
        //属性
        data:{
            fistName:"张",
            lastName:"三"
        },
        // 计算属性
        computed:{
            fullName:{
                //当有人读取fullName时，get就会被调用，返回值为fullName的值
                //get调用时机
                //1、初次读取fullName
                //2、所依赖的数据变化时
                get(){
                    //这里的this是指vm
                    return this.fistName + this.lastName;
                },
                //当fullName被调用时候调用
                set(value){
                    const arr = value.split("-")
                    this.fistName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

            fullName(){
                return this.fistName + this.lastName;
            }

  
    
    
    
    
    
  
  
    

      
今天天气很{{info}}
      切换天气
    
  
  

    vm.$watch("isHost", {
      //初始化时让handler调用一下
      immediate: true,
      //什么时候调用？当isHost发生改变时
      handler(newValue, oldValue) {
        console.log("isHost被调用", newValue, oldValue);
      },
    });

watch: {
        isHot((newValue, oldValue)): {
            console.log("isHost被调用", newValue, oldValue);
        }
}        

 data: {
        isHot: true,
        number: {
          a: 1,
          b: 1,
        },
      }

"number.a": {
            handler(newValue, oldValue) {
              console.log("a改变", newValue, oldValue);
            },
          },

        number:{
          //表示深度开启
          deep:true,
          handler(){
            console.log("number发生改变");
          }

        number:{
          //表示深度开启
          deep:true,
          handler(){
            console.log("number发生改变");
          }