vue中计算属性computed理解说明包括vue侦听器,缓存与computed的区别_vue.js

computed:{ [key: string]: Function | { get: Function, set: Function } }

<div id="app">
    <!--使用表达式的方式-->
    <p v-text="originalPrice - discountPrice"></p>
    <!--使用计算属性的方式-->
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             id:1,
            originalPrice:1200,
            discountPrice:200,
        },
        //计算属性
        computed: {
            // 把日期换成 常见规格格式的字符串。
            currentPrice: function () {
                return "当前价格:" + (this.originalPrice - this.discountPrice);
            }
        }
    });

<div id="app1">
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id: 1,
            originalPrice: 1200,
            discountPrice: 200,
        },
        //计算属性
        computed: {
             cache:false,
            // 把日期换成 常见规格格式的字符串。
            currentPrice: {
                get: function () {
                    return "当前价格:" + (this.originalPrice - this.discountPrice);
                },
                // 注意必须要传递参数,否则没有意义
                set: function (value) { 
                    //执行自定义的一下操作
                    this.discountPrice = value
                }
            }
        }
    });
</script>
<!-- 
在 console 中 输入 app.currentPrice=300 
1> 先执行get方法改变discountPrice的值
2> 因为数据发生改变了 所以会重新计算当前的价格, 执行get方法
-->

<!-- 响应式依赖 -->
<script>
    var vm = new Vue({
      data: {
        // 声明 message 为一个空值字符串
        message: ''
      },
    })
    // 响应式
    vm.message = 'Hello!'

    vm.v="非响应式的的值"
</script>

<div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed带缓存</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            getMethodsDate: function () {
                console.log(new Date().toLocaleTimeString())
            },
            // 返回computed选项中设置的计算属性——computedDate
            getComputedDate: function () {
                console.log("缓存--->" + this.computedDate)
            }
        },
        computed: {
            computedDate: function () {
                return new Date().toLocaleTimeString()
            }
        }
    })
</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        data: {
            test: "111",
            user: {
                name: "码帝",
                address: {
                    city: "大武汉"
                }
            }
        },
        methods: {
            fun: function (val) {
                alert(val)
            }
        },
        watch: {
            // 方法名方式 对应 methods中的函数名
            // test: 'fun',
            // 函数方式
            test: function (v1, v2) {
                alert("新值" + v1 + "====旧值:" + v2)
            },
            /**
             *什么是深度 例如  data: {test: "111", user: {name: "码帝" ,address{city:'大武汉'}}
             * user属性对应值就是深层,一次内推
             * 如果我们监听的user属性 当user.name属性发生改变的时候 watch监听是不到,所有我们这里需要使用深层监听
             */
            //
            user: {
                handler: function (val) {
                    alert(val.name)
                },
                // 是否深度监听 默认是false
                // 如果不设置为true当我们手动设置vm.user.name = "撸帝"的时候,是监听不到的
                deep: true
            },
            /**
             * 或者也可以使用下面的方式来监听
             * 注意键值必须是一个字符串，所以用引号括起来
             *
             */

            "user.address.city": function (val) {
                alert(val)
            }
        }
    });
    vm.test = '333';
    vm.user.name = "撸帝";
    vm.user.address.city = '长沙'

<div id="app">
    <input type="text" v-model="search"/>
    <ul>
        <li v-for="result in results" v-text="result"></li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user:{
                name:"码帝",
            }
            search: "",
            results: [],
            
        },
        methods: {
          fun: function () {
            alert("111");
          }
        }
        watch: {
         // 使用函数
            search: function (v1, v2) {
             console.log('新值: %s, 旧值: %s', v1, v2)
                this.results.push(v1)
            }
        }
        
    })
</script>