vue 中watch函数名_Vue中watch、computed、updated三者的区别以及使用方法

灰太狼 2023-01-01 06:52 145阅读 0赞

1、watch

理解： 监听器,监听某个数据的变化从而来执行一些操作，当data里面的数据发生变化的时候来执行一下开销较大或异步的操作

1、监听值类型(简单类型)数据

//在一个vue实例中

new Vue(\{

el:"\#myApp",

data:\{

num1:1,

num2:2

\},

methods:\{\},

watch:\{

//这里两个属性，第一个值是变化后最新的值，第二个是变化前

num1(after,before)\{

this.num2 = after +1

immediate:true //页面首次加载的时候做一次监听。

//这里的意思就是，监听num1的变化，当num1的数据发生变化的时候，来操作num2的值

\})

2、监听引用(复杂)类型的数据

new Vue(\{

el:"\#myApp",

data:\{

obj:\{

userName:"caicai"

\},

watch:\{

obj:\{

handler(newValue,oldValue)\{

// handler函数是当你的obj发生变化的时候你要做什么

console.log(newValue.userName,oldValue.userName);

\},

deep:true //是否深度侦听，true开启，false关闭,默认false

//加了deep之后相当于在对象obj每一层的属性都加上了handler侦听器。否则的话侦听到的只是引用地址，不会执行handler函数

\});

2、computed

理解：

计算属性,顾名思义就是通过某个属性(数据)来计算得到某个属性,这个重点在于计算，我们希望的是拿到data数据后处理一下，得到计算的结果。

在原vue中的template模板，作者初衷只是进行一些简单的运算，那么比较复杂的计算就可用computed来进行操作

1、第一种操作，写在模板里，导致模板过重，难于维护

\{ \{str.split("").reverse().join("")\}\}

2、第二种，使用一个方法来调用，若多处使用，就执行多次，降低运行速度，性能减少

\{ \{fn(str)\}\}

3、第三种，使用过滤器，具有缓存，只要str不发生变化，就不会再次进行运算

\{ \{reverseStr\}\}

到这里我先略微总结一下这两者的区别，以及使用场景

computed：

1、监控自己定义的变量，不用再data里面声明，函数名就是变量名

2、适合多个变量或对象进行处理后返回一个值(结果)。若这多个变量发生只要有一个发生变化，结果都会变化。

3、计算的结果具有缓存,依赖响应式属性变化，响应式属性没有变化，直接从缓存中读取结果。

4、在内部函数调用的时候不用加()。

5、必须用return返回

6、不要在computed 中对data中的数据进行赋值操作，这会形成一个死循环。

watch：郑州妇科医院 http://www.xadsyyfk.com/

1、watch 函数是不需要调用的。

2、重点在于监控，监控数据发生变化的时候，执行回调函数操作。

3、当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch

4、函数名就是你要监听的数据名字

使用场景：

computed：

1、一个需要的结果受多个数据影响的时候，比如购物车结算金额(受到很多处的价格结算)。

2、操作某个属性，执行一些复杂的逻辑，并在多处使用这个结果。

3、内部函数中多处要使用到这个结果的。

watch ：

1、监控一些input框值的特殊处理，适合一个数据影响多个数据。

2、数据变化时，执行一些异步操作，或开销比较大的操作

3、updated

理解： 是vue生命周期里面的一个钩子函数—data数据更新后触发视图更新。这里是视图更新之后的操作可以在这里执行。

触发条件：

1、当data中定义的数据有变化时就会加载updated方法。

2、任何数据的更新，如果要做统一的业务逻辑处理

3、在大多数情况下，此期间避免更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

特点：

1.执行到它的时候时候是数据发生变化且界面更新完毕

2.不能监听到路由数据(例如网址中的参数)

3.所有的数据发生变化都会调用(消耗性能)

4.只要数据发生变化，每次触发的代码都是同一个

vue 中watch函数名_Vue中watch、computed、updated三者的区别以及使用方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue中computed和watch使用场景和方法

相关 vue 中watch函数名_Vue中watch、computed、updated三者的区别以及使用方法

相关 Vue 中 watch 和 computed 区别

相关 Vue中的watch使用

相关 Vue中的watch

相关 vue中computed 和watch 的区别

相关 vue中watch的详解

相关 Vue 中 computed、methods、watch三者的区别

相关 vue中方法名:function() {} 和方法名() {}区别

相关 Vue中Computed和Watch的用法及其区别