vue系列：计算属性与监听器、vue实例的生命周期

最新推荐文章于 2023-03-22 18:32:23 发布

Laymanღ

最新推荐文章于 2023-03-22 18:32:23 发布

阅读量514

点赞数

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/TotoroChinchilla/article/details/124572555

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vue系列：计算属性与监听器、vue实例的生命周期

好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习

文章目录

vue系列：计算属性与监听器、vue实例的生命周期
前言
一、计算属性
二、监听器
三、vue实例的生命周期
总结

前言

今天主要学习的是关于计算属性与监听器以及vue实例的生命周期。接下来和我一起了解一下吧,go go go.

一、计算属性

1、计算属性的理解

{{}}模板的设计初衷就是用于简单的运算，如果我们要在里面放入太多逻辑复杂的代码，会让整个模板语句看起来笨重且难以维护。
例如：
{{msg.split(“”).reverse.join(“”)}}
split（“”）是将他每个字母都分割 ,reverse是将他进行反转，最后在打印。整个代码块的意思是显示出某个语句反转后的字符。

这样写太过于笨重，后期维护也不方便，所以我们将运算逻辑过多的放在computed计算属性里面进行计算。

computed:{ReverseMsg:function(){
return this.msg.split(“”).reverse().join(“”) }

例如以下代码：

 <body>
    <div id="app">
 <!--split（""）是将他每个字母都分割 ,reverse是将他进行反转，最后在打印。整个代码块的意思是显示出某个语句反转后的字符-->
        {{msg.split("").reverse().join("")}}
        <br>
        {{ReverseMsg}}
        <input v-model="msg">
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"hello vue"
            },
            methods: {},
          	computed:{
	             ReverseMsg:function(){
	                 return this.msg.split("").reverse().join("")
                }
                // ReverseMsg:this.msg.split("").reverse().join("")
            }
        })
    </script>
</body>

计算属性虽然叫属性，也是用来存储数据的（像data选项一样），但他的本质是方法他不可以直接赋值，必须通过方法去返回。

计算属性一般用来描述一个属性值依赖于另一个属性值。当我们使用{{}}模板语句时将计算属性绑定到页面元素上时，计算属性会在依赖的属性值的变化时自动的更新 DOM 元素。
我们通过上面的代码可以知道：改变计算属性的依赖值就可以改变计算属性值。

2、计算属性的组成

计算属性实际上有 get 和 set 函数组成，分别用来获取和设置计算属性值。他本身默认写的函数是get函数，来获取计算属性的值，如果有需要，可以提供一个set函数，当改变计算属性值时，set函数就会被执行(一般set属性我们用不上)。
注意：在 set 方法里面不要去直接改变计算属性的值，否则会导致死循环

3、计算属性和方法的区别

计算属性本质也是方法。
计算属性依耐了普通的属性，普通属性改变，计算属性也改变了。

计算属性具体代码案例如下< body>
< div id=“app”>
输入的值：

反转的值：{{reversedMessage}}
< /div>
< script>
var vm=new Vue({
el:“#app”,
data:{
message:“”
},
methods: {
},
computed:{
reversedMessage() {
//这里的 this 指向当前的 vm 实例
return this.message.split(‘’).reverse().join(‘’)
}
}
})
< /script>

结果为：
在这里插入图片描述

用方法的来实现的代码案例如下：
< body>
< div id=“app”>
输入的值：

反转的值：{{reversedMessage()}}
< /div>
< script>
var vm=new Vue({
el:“#app”,
data:{
message:“”
},
methods: {
reversedMessage(){
return this.message.split(‘’).reverse().join(‘’)
}
},
computed:{
/* reversedMessage() {
//这里的 this 指向当前的 vm 实例
return this.message.split(‘’).reverse().join(‘’)
} */
}
})
< /script>

区别：
1、我们在使用计算属性的时候，是把计算属性的名称直接当做属性来使用，而并不会把计算属性当做一个方法去调用。而作为方法调用直接写在{{}}里方法后面需要写（）
计算属性是基于它们的依赖进行缓存的
2、通过计算属性可以多次绑定的，因为依赖值没有改变，所以计算属性的 get 方法只执行了一次，因为带有系统时间的执行结果只有一个。而通过方法计算绑定多次，每绑定一次都会重新执行计算方法，当然由于速度太快，没有把每次执行的带有系统时间的结果输出（因为同一个时刻可能执行了 2 次或更多次绑定/调用了 2 次或更多次方法）因此计算属性多次使用时性能更高，实际上是因为计算属性具有缓存功能，再次渲染时只要依赖的属性值没有改变就是直接使用上次的执行结果

如下代码：

 <div id="app">
        {{ReverseMsg}}  {{ReverseMsg}}  {{ReverseMsg}}{{ReverseMsg}}{{ReverseMsg}}
        <br />
        <!-- 通过方法实现反转 计算每次渲染是都会重新执行方法-->
        {{ReverseMsg1()}}{{ReverseMsg1()}}{{ReverseMsg1()}}{{ReverseMsg1()}}{{ReverseMsg1()}}
 
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            },
            methods: {
                ReverseMsg1(){
                    console.log("执行的是方法"+Date.now());
                    return this.message.split('').reverse().join('')
                }
            },
            computed:{
                ReverseMsg() {
                    console.log("计算属性"+Date.now());
                    //这里的 this 指向 当前的 vm 实例
                    return this.message.split('').reverse().join('')
                }
            }          
        })     
    </script>

二、监听器

1、监听属性 watch和vue实例方法vm.$watch

1、监听属性watch

监听器以 key-value 的形式定义，key 是一个字符串，它是需要被监测的对象，而 value 则可以是字符串（指方法的名称，是通过 methods定义好的方法）、函数（可以获取到监听对象改变前的值以及更新后的值）或是一个对象（对象内可以包含回调函数的其它选项）。
value 实际上是监听到 key 变化后执行的回调函数

2、vue 实例方法 vm.$watch

格式如下：
vm.$ watch(data,callback[,options])

第一个参数为要侦听的数据,第二个参数为回调，第三个参数为选项，可有可无。实际上与 vm 实例选项 watch 是一样的，参数是一样的，就是写的位置不一样。
实例方法 vm.$ watch 写在 new Vue()外面，watch选项写在 new Vue( )里面，另外实例方法前面有$符号。

2、计算属性与监听属性 watch 使用总结

对于计算属性与监听属性 watch 使用总结
1）、计算属性的结果会被缓存起来，只有依赖的属性发生变化时才会重新计算，必须返回一个数据，主要用来进行纯数据的操作。
2）、监听器主要用来监听某个数据的变化，从而去执行某些具体的回调业务逻辑，不仅仅局限于返回数据。比如，当需要在数据变化时执行异步发送 ajax 请求或开销较大的操作时，采用监听器比较好。

三、vue实例的生命周期

我们在使用 Vue 时，都会创建一个Vue 的实例，这个实例不仅是我们挂载 Vue 框架的入口，也是MVVM 思想中的 VM(ViewModel)。而每个 Vue 实例在被创建时都要经过一系列的初始化过程。
vue 实例从创建到销毁的整个过程，叫 vue 实例生命周期。共 8
个阶段 8 个钩子函数beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
两个为一组，分别对应于 Vue 实例的创建、挂载、更新、销毁

在这里插入图片描述