vue- 计算属性

vue- 计算属性

(1) 基础例子

有的时候我们需要在模板中使用数据a,这个时候就需要用到表达式,但是有的地方我们需要对a数据进行一些简单的处理后才能使用,那么我们就会在表达式中写一些js逻辑运算比如现在我们要实现num值2倍的计算,

<div id="app">
        <p><button @click="num++">点击</button></p>
        <p>num: {{num}}</p>
        <p>num*2: {{num*2}}</p>
        <p><input type="text" v-model='msg'></p>
    </div>

缺点:如果在很多地方都用到这个计算的话,后期修改起来就会比较麻烦

(2)封装函数的方法

我们可以把多次操作的内容封装成一个函数进行调用

   <p>方法:{{doubleNum()}}</p>
var vm = new Vue({
            el:"#app",
            data:{
                num:1,
            },
		methods:{
                doubleNum(){
                    return this.num*2 
                }
      	 }
      	 })

但是这个时候,只要vm中有数据变化,这个变化的数据可能和我们关注的数据无关,但是vm都会重新渲染模板,这个时候表达式中的方法就会重新执行,大大的影响性能

(3)通过watch监听器实现此功能

watch可以监听现有的数据的改变,然后当现有数据发生改变了,内部就会实现一些业务逻辑

<div id="app">
        <p><button @click="num++">点击</button></p>
        <p>watchNum: {{watchNum}}</p>
    </div>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
                num:1,
                watchNum:''
            },
            watch:{
                //监听num值的改变,一旦num发生变化了,就让watchNum变成更改后的新值的2倍
                //在vm实例中设置watch属性,在里面通过键值对来设置一些监听,键名为数据名,值可以是一个函				  数,这个函数在数据改变之后才会执行,两个参数分别是更改前的值和更改后的值
                 // num:function(newValue,oldValue){
                 // this.watchNum = newValue*2
                 // }
                num:{
                   // 值还可以是一个方法名字,当数据改变的时候这个方法会执行
					//当数据为object的时候,object的键值对改变不会被监听到(数组的push等方法可以),这个时候需要设置深度监听:
                    immediate:true, //代表初始化的时候也让其执行一次
                    handler:function(newValue){
                        this.watchNum = newValue*2
                    }
                }  
            }
        })
</script>
(4)computed计算属性来实现

​ 计算属性的写法是一个函数,但是在上面调用的时候千万不能加括号调用。

​ 会根据现有数据生成一个新的数据,并且两者产生关联,建立永久性缓存。

​ 并且当无关数据发生改变的时候,计算属性内部不会重新计算,而是直接从缓存里面取数据即可

<div id="app">
        <p><button @click="num++">点击</button></p>
        <p>computedNum: {{computedNum}}</p>
    </div>
<script>
  var vm = new Vue({
            el:"#app",
            data:{
                num:1,
            },
            computed:{
                computedNum(){
                    console.log("计算属性...")
                    return this.num*2 
                }
            }
        })
</script>
(5)computed VS watch区别
  • watch的监听只是单个的监听,每次监听只能监听一个变量的修改,不能同时监听多个变量的同时更改。

​ 而计算属性computed可以依赖多个数据的变化(并且只跟它所依赖项进行关联)

  • 当需要在数据变化时执行异步或开销较大的操作时,只能选择采用watch去实现。

  • 计算属性就是在实例配置项中通过computed来为vm设置一个新的数据,而这个新数据会拥有一个依赖(一条已经存在的数据),当依赖发生变化的时候,新数据也会发生变化

  • 与方法的方式相比,它性能更高,计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

  • 与watch相比,写起来简单,逻辑性更清晰,watch一般多用于,根据数据的变化而执行某些动作,而至于这些动作是在干什么其实无所谓,而计算属性更有针对性,根据数据变化而更改另一个数据

  • 计算属性也拥有getter和setter,默认写的是getter,设置setter可以当此计算属性数据更改的时候去做其他的一些事情,相当于watch这个计算属性

     <div id="app">
            <p>{{fullName}}</p>
            <input type="text" v-model="fullName">
        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    firstName:"zhang",
                    lastName:"san"
                },
                computed:{
                    fullName: {
                        get: function () {
                            return this.firstName + ' ' + this.lastName
                        },
                        set: function (newValue) {
                            var names = newValue.split(' ')
                            this.firstName = names[0]
                            this.lastName = names[names.length - 1]
                        }
                    }
                }
            })
    
        </script>
    
posted @ 2020-08-11 16:50  Cupid05  阅读(238)  评论(0编辑  收藏  举报