一、计算属性
在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式
1、插值语法实现
直接在body中将两个数据拼接
- <div id="root">
- 姓:<input type="text" v-model="fistName"><br><br>
- 名:<input type="text" v-model="lastName"><br><br>
- 姓名:<span>{{fistName + lastName}}</span>
- </div>
2、通过方法实现
编写一个方法,返回值为两者拼在一起的字符串
- <div id="root">
- 姓:<input type="text" v-model="fistName"><br><br>
- 名:<input type="text" v-model="lastName"><br><br>
- <!-- 只要数据发生改变,这个方法就会再被调用一次 -->
- 姓名:<span>{{fullName()}}</span>
- </div>
- new Vue({
- el:'#root',
- data:{
- fistName:'张',
- lastName:'三'
- },
- methods: {
- fullName(){
- return this.fistName + this.lastName;
- }
- },
- })
3、通过计算属性
计算属性就是vue中的computed,这里面存放的是计算属性
而data中的是属性,两者不一样
- <div id="root">
- 姓:<input type="text" v-model="fistName"><br><br>
- 名:<input type="text" v-model="lastName"><br><br>
- 姓名:<span>{{fullName}}</span>
- </div>
- const vm = new Vue({
- el:'#root',
- //属性
- data:{
- fistName:'张',
- lastName:'三'
- },
- // 计算属性
- computed:{
- fullName:{
- //当有人读取fullName时,get就会被调用,返回值为fullName的值
- //get调用时机
- //1、初次读取fullName
- //2、所依赖的数据变化时
- get(){
- //这里的this是指vm
- return this.fistName + this.lastName;
- },
- //当fullName被调用时候调用
- set(value){
- const arr = value.split('-')
- this.fistName = arr[0]
- this.lastName = arr[1]
- }
- }
- }
- })
计算属性和方法的编写方式有点区别
- {{}}中方法是写一个方法的,即带括号
- 但是计算属性只需要写名字即可,不用带花括号
计算属性中要编写两个方法,一个是get方法,另一个是set方法
- 当有人读取fullname这个计算属性,get方法就会被调用,返回值是fullname的值
- 当有人修改fullname这个计算属性,set方法就会被调用
当明确只有get方法,不需要set方法的时候,计算属性可以简写成如下:
- fullName(){
- return this.fistName + this.lastName;
- }
get函数什么时候执行:
- 初次读取时会执行一次
- 当依赖的数据发生变化时会被调用一次
计算属性的优势
相对于方法来说,计算属性内部有缓存机制(复用),效率更好,调试更方便
简单来说,倘若计算属性不变,计算属性的数据就会存进缓存中,当页面上的其他数据需要读取这个计算属性的话,不再需要从vm获取,直接从缓存里面获取
二、监视属性
监视属性可以监视某个属性的变化,并且可以获取变化前和变化后的数值
通过关键词watch实现
- <!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 type="text/javascript" src="../js/vue.js"></script>
- </head>
- <body>
- <div id="root">
- <h2>今天天气很{{info}}</h2>
- <button @click="changgeWeather">切换天气</button>
- </div>
- </body>
- <script>
- Vue.config.productionTip = false;
- const vm = new Vue({
- el: "#root",
- data: {
- isHot: true,
- },
- computed: {
- info() {
- return this.isHot ? "炎热" : "凉爽";
- },
- },
- methods: {
- changgeWeather() {
- this.isHot = !this.isHot;
- },
- },
- // 监视
- //适用于一开始很明确地知道要监视谁
- watch: {
- isHot: {
- //初始化时让handler调用一下
- immediate: true,
- //什么时候调用?当isHost发生改变时
- handler(newValue, oldValue) {
- console.log("isHost被调用", newValue, oldValue);
- }
- },
- // }
- });
- </script>
- </html>
例如如上案例,当isHost被修改的时候,监视属性中的isHost中的handler就会被调用
而 immediate: true 的作用是再初始化的时候调用一下这个监视属性
注意的是监视属性必须存在,才可以进行监视
除了以上邪恶写法,还可以通过vm.$watch监视
- vm.$watch("isHost", {
- //初始化时让handler调用一下
- immediate: true,
- //什么时候调用?当isHost发生改变时
- handler(newValue, oldValue) {
- console.log("isHost被调用", newValue, oldValue);
- },
- });
两种的使用场合不同:
- 第一个则是,一开始就很明确这个属性需要监视,则写在vue里面
- 第二个则是,一开始不知道这个属性需要被监视,然后后面加上的,就可以用vm.$watch
当监视属性只有handler的时候,可以进行简写
- watch: {
- isHot((newValue, oldValue)): {
- console.log("isHost被调用", newValue, oldValue);
- }
- }
三、深度监视
深度监视主要用于监视层次比较高的
- data: {
- isHot: true,
- number: {
- a: 1,
- b: 1,
- },
- }
例如这个data里面的number,需要监视里面的a和b的变化,则需要用到监视属性
- "number.a": {
- handler(newValue, oldValue) {
- console.log("a改变", newValue, oldValue);
- },
- },
监视对象里面的某个属性,就可以如上这也进行操作,“对象.属性”表示监视里面的某一个属性
同时也可以监视number的变化,只需要在在里面开启深度即可
- number:{
- //表示深度开启
- deep:true,
- handler(){
- console.log("number发生改变");
- }
监视对象里面的某个属性,就可以如上这也进行操作,“对象.属性”表示监视里面的某一个属性
同时也可以监视number的变化,只需要在在里面开启深度即可
- number:{
- //表示深度开启
- deep:true,
- handler(){
- console.log("number发生改变");
- }
到此这篇关于Vue计算属性与监视属性实现方法详解的文章就介绍到这了,更多相关Vue计算属性与监视属性内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!