计算属性computed和侦听watch(2)--vue计划

1.计算属性ComPuted,1.为了处理复杂的计算逻辑而使用,比methods方法更轻便,快捷,特殊处理缓存使用更佳,methods比较消耗内存,相对而言. 2. 解决业务代码在标签里处理的问题.

       *** 特别注意,计算时的属性不能再data里初始化,如data:{totalPrice:’’},computed: {totalPrice:function(){}},这样是不允许的,只能在computed里创建.

**计算属性练习1 : 

苹果手机价格单价input

数量input v-model:

华为手机价格单价input 

数量input v-model

小米手机价格单价input 

        数量input v-model

总价: 一般做法写一个div,里面进行逻辑操作,price1*num1 + price2 *num2

<div>属性计算:{{totalPrice}}</div>

computed: {

  totalPrice: function() {

    let {price1,num1,price2,num2,price3,num3} = this

    return price1*num1 + price2 *num2 

           }

}

** methods也可以用这个方法计算,官方推荐计算,因为依赖缓存用计算,methods会影响性能,因为要重复调用,执行才去改变

 

2.watch 侦听器属性,一个属性的改变影响着多个属性会使用到watch侦听

*** watch可以看作是methods和computed的结合体

pageInfo : {

 page: 1,

 str: ‘’

}

// 可以在检查里调用 app来改变它们的值 ,app是绑定的id,取出所有实例属性

// 一个数据影响多个数据会用到watch,多个受依赖的数据的改变而影响的”受影响”的数据

watch: {

   // 侦听单个字符

  price1: function(newValue,oldValue) {

console.log(‘watch——>’, newValue,oldValue)

  }

  // 侦听整个对象

  pageInfo: {

    handler: function(newValue,oldValue) {

     // 哪个值改变,显示哪个数据变化

      console.log(‘watch appleInfo———’,newValue,oldValue)

    },

    deep: true, // true,false深度监听还是普通监听

    immediate: true // true/false,是否以当前的初始值执行handler函数

  }

}

3.代码如下,下面vue是通过npm安装vue的方式导入的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        苹果手机价格:<input v-model="price1"></input>
        数量:<input v-model="num1"></input>
    </div>
    <div>
        华为手机价格:<input v-model="price2"></input>
        数量:<input v-model="num2"></input>
    </div>
    <div>
        小米手机价格:<input v-model="price3"></input>
        数量:<input v-model="num3"></input>
    </div>
    <div>总价: {{ total }}
    </div>
    <div>直接计算: {{ price1 *num1 + price2* num2 + price3*num3}}</div>

</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            price1: '',
            num1: 0,
            price2: '',
            num2: 0,
            price3: '',
            num3: 0,
            priceInfo: {
                price: '',
                num: 0
            }
        },
        computed: {
            total: function() {
                let {price1,num1,price2,num2,price3,num3} = this
                return price1 * num1 + price2 * num2 + price3 * num3
            }
        },
        methods() { // 写方法用的
        },
        watch: {
            // 侦听单个属性,可以直接在检查里输入挂载的id,app来改变price1的信息或输入改变
            price1: function(newValue, oldValue) {
                console.log('watch---------->',newValue, oldValue)
            },
            // 也可以侦听整个对象
            priceInfo: {
                // 侦听对象用到handler方法
                handler:function(newValue, oldValue) {
                    console.log('watch appleInfo———---------->',newValue, oldValue)

                },
                deep: true, // 深度侦听与普通侦听,如果为true时,会侦听详情信息,并打印handler中的信息,false则不会打印handler信息
                immediate: true // true/false,是否以当前的初始值执行handler函数,为true时打印的是初始化的信息
            }
        }
    })
</script>
    
</body>
</html>

　　

 

posted @ 2019-12-01 18:46  TheYouth  阅读(199)  评论(0)    收藏  举报