Vue2（二）：计算属性、监视属性、二者的区别

小粉粉hhh

已于 2024-03-16 15:51:08 修改

阅读量613

点赞数 7

文章标签： javascript 前端 vue.js

于 2024-03-16 15:43:57 首次发布

本文链接：https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/136758675

版权

一、计算属性

1. 使用插值语法和methods拼接姓名

如果样式要求不多的话这样写没问题，如下代码是截取我输入的姓的前三个字母

<div id="root">
       姓：<input type="text" v-moudel="firstName">
       名：<input type="text" v-moudel="lastName">
       姓名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            firstName:'hb',
            lastName:'bj'
        }
    })

样式太多的话就都放进methods里面去

注意：之前的showInfo是绑定事件，加不加（）都行，现在是调用那个函数必须得加（）

每次改动firstName后者lastName就会重新解析模版，调用fullName

<div id="root">
       姓：<input type="text" v-model="firstName">
       名：<input type="text" v-model="lastName">
       姓名：<span>{{fullName()}}</span>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            firstName:'hb',
            lastName:'bj'
        },
        methods:{
            fullName(){
                // this是vue实例，里面就有firstName啥的
                return this.firstName+'-'+this.lastName
            }
        }
    })

2. 使用计算属性拼接姓名

定义：要用的属性不存在，要通过Vue中已有属性计算得来。

原理：底层借助了Objcet.defineproperty方法提供的getter和setter

属性：vue认为data里面写的就是属性，属性：属性值,属性在vm._data里

计算属性：就是拿着你已经写完的属性去加工计算，放在vm里，不在data里

属性放在data里，计算属性放在computed

<div id="root">
       姓：<input type="text" v-model="firstName">
       名：<input type="text" v-model="lastName">
       姓名：<span>{{fullName}}</span>
姓名：<span>{{fullName}}</span>
姓名：<span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            firstName:'hb',
            lastName:'bj'
        },
        computed:{
            fullName: {
                get(){
                    //读取fullName的时候自动调用get
                    // 并且vue给你设置computed里的this是vm
                    console.log('get被调用喽')
                    return this.firstName+'-'+this.lastName
                }
               
            }
        }
        
    })

如果这个时候我多次调用fullName的话，输出get被调用喽只显示一次，因为有缓存

get什么时候调用？（1）初次读取fullName 时，（2）所依赖的数据发生变化时，所以不用担心姓或者名变化fullName没变

我用computed不是fullName对象.get函数！而是我用fullName的时候立马就调用get函数，返回一个值放在fullName（计算出来的新属性）身上，在vm中可以查看

set什么时候调用？fullName被修改的时候，而且必须设置参数，你把fullName改成什么就返回什么

set(value){
                   const arr=value.split('-')
                   this.firstName=arr[0]
                   this.lastName=arr[1]
                   //fullName依赖first和last，想真正的改掉就得把谁算出来的改掉
                   
               }

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：
1.计算属性最终会出现在vm上，直接读取使用即可，不用加括号，和methods区别一下子。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变，这很关键。

3. 计算属性的简写

计算属性一般不修改，确定只读不改就可以用简写

姓名：<span>{{fullName}}</span>

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

fullName是一个属性，不是一个方法，只不过是调用里面的getter，把返回值直接给了vm，所以直接{{fullName}}不可以加（）！！

data的数据，methods的方法，computed的计算属性

二、监视属性

1. 天气切换案例

(1)利用插值语法和三元表达式

<div id="root">
       <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
       <button>切换天气</button>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            isHot:true
        }
    })

(2)利用计算属性

<div id="root">
       <h2>今天天气很{{info}}</h2>
       <button @click="change">切换天气</button>
    </div>
    <script type="text/javascript">
    
    const vm=new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
                // isHot不是computed里的找不到，所以得this，就是vue的
            }
        },
        methods:{
            change(){
                this.isHot=!this.isHot;
            }
        }
        
    })

不需要methods也可以这样写：

<button @click="isHot=!isHot">切换天气</button>

@xxx：yyy绑定事件的时候可以写一些简单的语句

2. 监视属性

(1)watch

watch:{
            isHot:{
                immediate:true,
                //初始化时让handler调用
                //当isHot发生改变时它就调用
                handler(newValue,oldValue){
                    console.log('isHot改了',newValue,oldValue)
                }
            }
        }

用handler的时候同时返回两个参数newValue和oldValue

(2)vm.$watch

const vm=new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot?'炎热':'凉爽'
                // isHot不是computed里的找不到，所以得this，就是vue的
            }
        },
    })
        vm.$watch('isHot',{
            immediate:true,
                //初始化时让handler调用
                //当isHot发生改变时它就调用
                handler(newValue,oldValue){
                    console.log('isHot改了',newValue,oldValue)
                }
        })

第一个参数是对象名，第二个参数是配置对象

区别：很明确坚实谁就写第一种，否则就写第二种

3. 深度监视

(1).Vue中的watch默认不监测对象内部值的改变（一层，如果监视那么对象地址不变就不变）。
(2).配置deep:true可以监测对象内部值改变（多层）。
(3).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！想要可以就要手动开启deep:true
(4).使用watch时根据数据的具体结构，决定是否采用深度监视。

 <div id="root">
        <h3>a的值是:{{numbers.a}}</h3>
       <button @click="numbers.a++">点我实现a+1</button>
       <h3>b的值是:{{numbers.b}}</h3>
       <button @click="numbers.b++">点我实现b+1</button>
    </div>
    <script type="text/javascript">
    
    new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        watch:{
            //监视多级结构中某个属性的变化
          numbers:{
            //不加引号报错是因为本来就应该加引号写，有的中间不带.的简写了没加

            //  如果想要给b也加的话，一个一个写太麻烦了，但是发现直接给number加
            //  改变a或者bnumber都不输出，因为它没有深入的去看a或b的变化
            
            deep:true,//监视多级结构中所有属性的变化
            handler(){
                    console.log('number改了')
                }
              }
           
        }
        
    })

    </script>

4.监视的简写形式

用简写的前提是不需要immediate也不需要deep

(1)watch写法

watch:{
           isHot(newValue,oldValue){
              console.log('isHot被改了')
           }
       }

(2)$watch写法

vm.$watch('isHot',function(newValue,oldValue)
    {
        console.log('isHot被改了')
    })

三、watch对比computed

1.watch

<div id="root">
        姓：<input type="text" v-model="firstName">
        名: <input type="text" v-model="lastName">
       全名： <span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
    
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
       watch:{
           firstName(newValue){
               this.fullName=newValue+'-'+this.lastName
           },
           lastName(newValue){
               this.fullName=this.firstName+'-'+newValue
           }

       }

        
    })

监视姓的同时还是监视名

2.computed

computed:{
            fullName: {
                get(){
                    console.log('get被调用喽')
                    return this.firstName+'-'+this.lastName
                }
               
            }
        }

加一下就完事了，但是computed计算属性里面不能开启异步任务去维护数据的，靠的就是返回值，watch就可以开延迟什么的。

 firstName(newValue){
               setTimeout(()=>{
                this.fullName=newValue+'-'+this.lastName
               },1000)

总结：

1、computed能完成的功能，watch都可以完成。
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则！
1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象

小粉粉hhh

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Vue2（二）：计算属性、监视属性、二者的区别

1、computed能完成的功能，watch都可以完成。2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。两个重要的小原则！1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。
复制链接

扫一扫