一、计算属性

定义:所谓计算属性,就是用已经存在的属性去计算,然后生成一个全新的属性。计算属性的妙处在于它是依赖于你所指定的那个属性的,当该属性发生变化时,计算属性也会发生变化

原理:底层借助的Object.defineProperty方法提供的getter和setter

计算属性的语法:

computed:{

计算属性名:{

                  get(){return ...}//当有人读取计算属性时,get函数就会被调用,且返回值就作为计算属性的值,get函数什么时候被调用:1、初次读取计算属性时,2所依赖的数据发生改变时

                  set(value){...}//当计算属性被修改时,set函数会被调用

}}

简写形式:

computed:{
                                       函数(){

                                             return...}}

计算属性的优势:

与methods实现方式相比,计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 所依赖的属性 还没有发生改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数,大大提高运行效率,方便调试。

二、侦听属性

定义:Vue 提供的一种更通用的方式来观察和响应 Vue 实例上的数据变动;

语法格式:watch:{

                       侦听属性名:{

                                handle(newValue,oldValue){//当侦听属性发生变化时,调用handle函数

                                  //操作

                                }}

简写形式:

watch:{

                       侦听属性名(newValue,oldValue){

                               操作}}

深度监视:

深度监视也就是监视对象内部的属性值变化,首先需要了解一些配置:

1、deep:深度监视,默认为false;

2、immediate:页面初始化时是否触发回调,默认为false;

理解:

1、vue中的watch默认不检测对象内部值得改变(一层);

2、配置deep:true可以监测对象内部值改变(多层);

三、计算属性和侦听属性的区别

区别:

1、computed能完成的功能,watch都能完成;

2、watch能完成的功能,computed不一定能完成,比如,watch可以进行异步操作;

补充小原则:

1、所被vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象;

2、所有不被Vue管理的函数,像定时器的回调函数、ajax的回调函数等,最好写成箭头函数,这样其this的指向才是vm或组件实例对象。

Logo

前往低代码交流专区

更多推荐