Vue2.0学习—watch和computed对比(三十七)

Posted 王同学要努力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.0学习—watch和computed对比(三十七)相关的知识,希望对你有一定的参考价值。

【Vue2.0学习】—watch和computed对比(三十七)

计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
   
    <div id="root">
        姓:<input type="text" v-model="firstname"> <br> <br> 名: <input type="text" v-model="lastname"> <br> <br> 姓名:
        <span>fullName</span>
    </div>
    <script>
        const vm = new Vue(
            el: "#root",
            data: 
                firstname: '张',
                lastname: '三'
            ,
            computed: 
                //完整写法
                //     fullName: 
                //         //当有人读取fullName时,get就会被调用且返回值作为fullName的值
                //         // get什么时候调用?初次读取fullName时;所依赖的数据发生变化
                //         get() 
                //             console.log('get被调用了');
                //             return this.firstname + '-' + this.lastname
                //         ,
                //         set(value) 
                //             console.log('set', value);
                //             const arr = value.split('-');
                //             this.firstname = arr[0];
                //             this.lastname = arr[1];
                //         
                //     
                // 

                //简写
                fullName() 
                    return this.firstname + this.lastname
                
            
        )
    </script>
</body>

</html>

watch 属性

以上是关于Vue2.0学习—watch和computed对比(三十七)的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 watch里面的 deep和immediate作用

vue computed 实现原理与 watch 对比

Vue--computed计算属性监听数据变化----与watch,methods对比

VueVue的依赖追踪系统 ——搞懂methods watch和compute

Vue2.0学习—监视属性(三十五)

Vue2.0笔记——Vue实例