vue.watch,vue watch写法

　　本文主要介绍了watch在vue中的用法总结，帮助大家更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

　　在vue中，watch用于响应数据的变化。手表大致有三种用法。

1. 常用用法

　　输入类型=text v-model=name/

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　名称：“咸鱼”

　　},

　　观察：{

　　名称(新值，旧值){

　　//.

　　}

　　}

　　})

　　直接写一个监控函数，每次name的值改变时执行该函数。您也可以在监控数据后直接添加字符串形式的方法名称：

　　观察：{

　　名称：“名称更改”

　　}

2 .立即执行(immediate和handler)

　　watch的第一次使用有一个特点，就是在第一次绑定值的时候，不会执行监控功能，只有在值发生变化的时候才会执行。如果我们需要在最初绑定值时执行函数，我们需要使用immediate属性。

　　比如父组件动态传递一个值给子组件，子组件props第一次获取父组件传递的默认值时，也需要执行函数。这时候就需要将immediate设置为true。

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　名称：“”

　　},

　　观察：{

　　名称：{

　　处理程序(newVal，oldVal) {

　　//.

　　},

　　即时：正确

　　}

　　}

　　})

　　被监控的数据是以对象形式写的，包括handler方法和immediate。我们之前写的函数其实就是写这个handler方法；

　　立即指示当第一次绑定观察器时是否执行处理程序。true值表示当声明观察器时，将立即执行处理程序方法。false值表示只有在数据发生变化时才会执行处理程序，就像watch的一般用法一样。

3 .深度监听

　　当需要监控复杂数据类型(对象)的变化时，普通的watch方法无法监控对象内部属性的变化，只能监控数据中的数据。这时就需要deep属性对对象进行深度监控。

　　输入类型=text v-model=person.name/

　　新Vue({

　　埃尔： #app ，

　　数据：{

　　人物：{id: 1，姓名：咸鱼 }

　　},

　　观察：{

　　人：{

　　处理程序(newVal，oldVal) {

　　//.

　　},

　　深：真的，

　　即时：正确

　　}

　　}

　　})

　　设置deep: true可以监控person.name的变化此时这个监听器会添加到person的所有属性中。当对象有许多属性时，将为每个属性值的改变执行处理程序。如果只需要监听对象中的一个属性值，可以进行如下优化：监听字符串形式的对象属性：

　　观察：{

　　person.name: {

　　处理程序(newVal，oldVal) {

　　//.

　　},

　　深：真的，

　　即时：正确

　　}

　　}

　　这只会将侦听器添加到对象的特定属性中。

　　数组(一维和多维)的变化不需要深度监控，而对象数组中对象的属性变化需要深度监控。

　　以上是手表在vue中的使用总结的详细内容。更多关于vue watch的使用方法，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。