Vue3的Options-API

计算属性

图片.png

<h2>{{fullName}}</h2>  
调用计算属性的时候，表面上计算属性是一个函数，实际上不用写括号，直接调用计算属性名，即可；
而methods中，调用方法的时候，需要把括号加上，因为真的是一个方法

data(){
    return{
        firstName:"abc",
        lastName:"123"
    }
}
computed:{
    fullName(){
        return this.firstName+this.lastName
    }
}

计算属性是有缓存的，methods是没有缓存的。可以提高性能；当我们多次使用计算属性时候，计算属性中的运算只会执行一次；当我改变data中值的时候，无论是methods还是computed，都会将对应所依赖的值修改。是响应式的；

computed是同步的，watch是异步的，也就是如果在computed中使用setTimeInterval，可能数据会达不到理想状态，我们最好使用watch来避免，watch能做的，computed不一定能做。

计算属性的setter和getter

计算属性一般只需要一个getter方法即可。就是直接return，就是一个getter方法；

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

当拥有setter方法，也就是计算属性的完整写法：实际上就是将methods方法改写为computed

<button @click="changeFirstName">修改fullName</button>
data(){
    return{
        firstName:"abc",
        lastName:"123"
    }
}

computed:{
    fullName:{
        get:function(){
            return this.firstName+this.lastName
        },
        当计算属性被调用时，并且赋值，就会调用setter方法
        set:function(newValue){
        因为传来的newValue字符串，我切割成一个数组，用空格为区分，分别为下标0和1
            const names = newValue.split(" ");
            this.firstName = names[0];
            this.lastName = names[1];
        此时firstName的值发生了改变，就会重新调用getter方法，页面上就会重新出现最新的fullName的值
        }
    }
}

methods:{
    changeFirstName(){
    计算属性的值被修改了，就会调用计算属性里的setter方法
        this.fullName = "Coder why"
    }
}

侦听器watch

图片.png

当数据发生变化的时候，我会做出改变，这就是侦听器的作用
<input type="text" v-model="question"></input>
data(){
    return{
        question:"abc",
        answer:" ",
    }
},
watch:{
侦听question，可以侦听props和data中属性的名称
    question(newValue,oldValue){
        当我对input的值进行改变
        newValue就是我新输入的内容的值
        oldValue就是输入前的值
        举例：
        当我的input框值发生改变时，我就调用方法（查询服务器中相应得到的内容）
        this.queryAnswer();
    }
}

侦听器补充

我在里面创建一个对象，对象里面又有其他的数据
data(){
    return{
        info:{
            question:"abc",
            answer:" ",
        }
    }
},
watch:{
    info(newInfo,oldInfo){
        console.log(newInfo,oldInfo)
    }
},
methods:{
    changeInfo(){
    我普通的侦听到。得到的其实一个Proxy对象，代理对象；
    可以得到Info中被修改后的数据，是以对象的形式
    我直接修改对象，普通侦听是可以的
        this.info={name:"Kobe"}
    },
    changeInfoName(){
    但是如果我想要改变info对象里的具体的某个数据
    this.info.question="Kobe";
    我直接修改对象中具体的数据，普通侦听是侦听不到的
        this.info.name = "Kobe"
    }   
},

此时我们可以通过
1.深度侦听:变成handler方法，并且写上deep:true
  立即执行：一打开页面，渲染后，就立马执行一次
watch:{
    info:{
        handler:function(newInfo,oldInfo){
            console.log(newInfo,oldInfo);
        },
        deep:true
        immediate:true  立即执行
    }
}

图片.png

$watch侦听

当我使用一个常量接收$watch的时候，直接调用unwatch可以取消监听，仅限于这种写法并且也基本不会取消侦听器
methods:{
    caeated(){
    这里是可以使用箭头函数的this的
        const unwatch = this.$watch("info"方法名,function(newInfo,oldInfo){
            console.log(newInfo,oldInfo);
        },{
         deep:true,
         immediate:true
        })
    }
}

综合案例

图片.png

展示效果：

图片.png

逻辑代码：

<tr v-for="(book,index) in books">
    <td>
        <button @click="increment(index)">  可以拿到索引值
        
        <button :disable="book.count <= 1"></button> 
        让数量<1的时候，减少的按钮效果暂时失效
    </td>
    <td>
        {{formatPrice(book.price)}}
    </td>
    <td>
        <button @click="removeBook(index)"></button>
    </td>
</tr>
    <h2>总价格：{{formatPrice(finalPrice)}}</h2>
    methods:{
        increment(index){
            this.books[index].count++  点加号，让数量值+1
        }
        removeBook(index){
            从index处开始移除，移除1个
            this.books.splice(index,1);
        }
        在每个价格前面 + ￥ 符号
        formatPrice(price){
            return "￥" + price;
        }
    }
    computed:{
      totalPrice(){
          let finalPrice = 0;
          for(let book of this.books){
              finalPrice +=book.count * book.price;
          }
          return finalPrice;
      }
      Vue3不再支持过滤器，使用计算属性、全局方法替代
      我想给价格的前面 加上一个 ￥ 符号，如果在模板里书写，后期维护会很麻烦
    },

Vue03-coderwhy

Vue3的Options-API

计算属性

计算属性的setter和getter

侦听器watch

侦听器补充

$watch侦听

综合案例