简单聊聊Vue中的计算属性和属性侦听


Posted in Vue.js onOctober 05, 2021

1. 计算属性

定义

  • 计算属性:要用的属性不存在,要通过已有属性计算得来,计算属性要有一个全新的配置项computed
  • 对Vue来说,data里面的数据就是属性,只要Vue中的数据改变,就会重新解析模板,遇到插值语法里的方法会重新调用

原理

  • 底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行?

  • 初次读取时会执行一次。
  • 当依赖的数据发生改变时会被再次调用。

优势

  • 与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。

备注

  • 计算属性最终会出现在vm(Vue实例)上,直接读取使用即可。
  • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。

语法:  1.简写方式:

computed: {
     "计算属性名" () {
         return "值"
     }
 }

需求: 求2个数的和显示到页面上

<template>
  <div>
    <p>{{ num }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  // 场景: 一个变量的值, 需要用另外变量计算而得来
  /*
    语法:
    computed: {
      计算属性名 () {
        return 值
      }
    }
  */
 // 注意: 计算属性和data属性都是变量-不能重名
 // 注意2: 函数内变量变化, 会自动重新计算结果返回
  computed: {
    num(){
      return this.a + this.b
    }
  }
}
</script>

<style>

</style>

语法:  2.完整写法:

计算属性写成配置对象的格式:对象中用get和set函数

get的作用:  当有人读取fullName时,get就会被调用,且返回值就作为计算属性的值  (get一定要写return)

get什么时候调用? 1.初次读取fullName时。 2.所依赖的数据发生变化时。

get(){
                console.log('get被调用了')
                // console.log(this) //  此处的this是vm(Vue实例)
                return this.firstName + '-' + this.lastName
            },

set:当计算属性的值被修改时被调用 形参接收的是传入的新值

...
  computed:{
      fullName:{
          //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
          //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
          get(){
              console.log('get被调用了')
              // console.log(this) //此处的this是vm
              return this.firstName + '-' + this.lastName
          },
          //set什么时候调用? 当fullName被修改时。
          set(value){
              console.log('set',value)
              const arr = value.split('-')
              this.firstName = arr[0]
              this.lastName = arr[1]
          }
      }
  }
})

2. 监视(侦听)属性

<!-- 绑定事件的时候:@xxx="yyy" yyy可以写一些简单的语句 -->
<button @click="isHot = !isHot">切换天气</button>

1. 监视属性watch:

当被监视的属性变化时, handler回调函数自动调用, 进行相关操作

监视的属性必须存在,才能进行监视!!

...
      // 写法1. 传入watch配置 侦听ishot属性
      
      watch:{
          isHot:{
              immediate:true, //初始化时让handler调用一下
              
              //handler什么时候调用?当isHot发生改变时。
              
              handler(newValue,oldValue){
                  console.log('isHot被修改了',newValue,oldValue)
              }
          }
      }
  })
  
  
  // 写法2. 通过vm.$watch监视
vm.$watch('isHot',{
   immediate:true, //初始化时让handler调用一下,默认是false
   //handler什么时候调用?当isHot发生改变时。
   handler(newValue,oldValue){ // 有两个参数,一个是新值,一个是旧值
   	console.log('isHot被修改了',newValue,oldValue)
   }
})

2. 深度监视

深度监视:

  • 1)Vue中的watch默认不监测对象内部值的改变(一层)。
  • 2)配置deep:true可以监测对象内部值改变(多层)。

备注:

  • 1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  • 2)使用watch时根据数据的具体结构,决定是否采用深度监视。
data:{
	isHot:true,
	numbers:{
		a:1,
		b:1
	}
},
watch:{
	// 监视多级结构中某个属性的变化(原始写法是要加引号的,简写可以不加,但这种情况要加,否则报错)
	/* 'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} */
	//监视多级结构中所有属性的变化
	numbers:{
		deep:true, // 如果不开启这个,那监测的就是numbers的地址是否有变化
		handler(){
			console.log('numbers改变了')
		}
	}
}

监视属性-简写

当监视属性中只有handler()而不需要开启其他配置项时才能简写

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

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

3. 区别和原则

computed和watch之间的区别

  • computed能完成的功能,watch都可以完成。
  • watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则

  • 所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
  • 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。
watch:{
	firstName(val){
		setTimeout(()=>{
			console.log(this) //vue实例对象,若用普通函数则返回Window
			this.fullName = val + '-' + this.lastName
		},1000);
	},
	lastName(val){
		this.fullName = this.firstName + '-' + val
	}
}

总结

到此这篇关于Vue中计算属性和属性侦听的文章就介绍到这了,更多相关Vue计算属性和属性侦听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
SSM VUE Axios详解
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
You might like
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
优化PHP代码的53条建议
2008/03/27 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
WAF的正确bypass
2017/01/05 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python简单获取数组元素个数的方法
2015/07/13 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
详解python tkinter 图片插入问题
2020/09/03 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
行政经理岗位职责
2013/11/09 职场文书
建材业务员岗位职责
2013/12/08 职场文书
四风存在的原因分析
2014/02/11 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
专项法律服务方案
2014/06/11 职场文书
Minikube搭建Kubernetes集群
2022/03/31 Servers
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技