Vue条件渲染、watch侦听器与computed计算属性的共性与差别 -

一:watch侦听器和computed计算属性的相同点与区别

首先我们分别用computed和watch做一个根据单价与商品数量来自动计算总价的计算机来体现他们之间的差别:

html代码如下:

<div class="app">
        <p>单价: <input type="text" min="1" v-model="price" > </p>
        <p>数量: <input type="number" min="1" v-model="quantity"> </p>
        <p>我是computed计算的总价:{{getPrice}}</p>
        <p>我是watch计算算的总价:{{total}}</p>
    </div>

如果用computed实现完整的功能,我们只须用以下方法:

let vm = new Vue({
            el:".app",
            data:{
                price:"",
                quantity:"",
            },
            computed:{
                getPrice:function(){
                    console.log("getPrice")
                    return this.price * this.quantity
                }
            },

通过实践我们发现:computed可以同时监控多个数据,当其中一个数据变化就会自动计算,它可以像函数一样调用,但不必为每个数据都添加专门的事件,而且computed是有缓存的,即数据更新才会触发,我在多次刷新页面并没有多次触发,这样大大节省了资源.

如果用watch侦听也可以实现相同功能,但我们不得不把需要侦听的数据都添加进watch侦听器里,因为watch只能改变现有的数据,所以我们还得提前提供一个空的总价供watch计算

let vm = new Vue({
            el:".app",
            data:{
                price:"",
                quantity:"",
                total:"",//因为watch不能当成函数一样调用,所以只能添加一个值
            },
            watch:{
                //watch可以同时接受三个参数:新值,旧值,作用域的引用,只能同时监听一个数据,随着数据改变再计算,不能引用,只能影响其它值
                //因为一次只能侦听一个值,所以必须侦听二个数据:
                price(newPrice,oldPrice){
                    console.log(newPrice,oldPrice)
                    //watch会随着监控的数据变化直接影响,所以不需要用return
                     this.total=this.price * this.quantity                
                },
                quantity(newQuantity,oldQuantity){
                    console.log(newQuantity,oldQuantity)
                    this.total=this.price * this.quantity
                },
            }
        })

经过测试,发现二者都正常运行:

通过对比,我们可以得出结论:
1. computed可以观察多个数据，watch只能是一个数据
2.computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据
3. computed不可以执行异步的，因为需要返回值，返回值是由js主线程控制，watch可以执行异步的，因为不需要返回数据，定时器是属于异步的线程

二.VUE的条件渲染

1.v-if:只有当变量值为true时，绑定该条件的元素才显示
2.v-shou:同v-if效果等同，但是v-show是通过修改DOM元素的display属性来实现节点的显示和隐藏的，而v-if则是通过添加/删除DOM节点来实现的
3.v-if…v-else-if…v-else:可以对多个元素绑定一个变量，当变量的值符合其中之一时，符合条件的元素显示，否则绑定v-else的元素显示
这里我们拿第三种来做一个根据分数判断进行条件渲染:

代码如下:

<body>
    <div class="app">
        <label >请输入你的成绩:<input type="text" v-model="points"></label>   
        <p v-if="points>=80 && points<=100">{{grade[0]}}</p>
        <p v-else-if="points<80 && points>=70">{{grade[1]}}</p>
        <p v-else-if="points<70 && points>=60">{{grade[2]}}</p>
        <p v-else-if="points<60">{{grade[3]}}</p>   
        <p v-else>{{grade[4]}}</p> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:".app",
            data(){
                return{
                    points:"",
                    grade:[
                        "优秀",
                        "一般",
                        "及格",
                        "补考",
                        "请输入正确的值"
                    ]
                }
            }
        })
    </script>