Vue的$watch方法怎么使用

这篇文章主要介绍了Vue的$watch方法怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue的$watch方法怎么使用文章都会有所收获，下面我们一起来看看吧。

代码如下：

// 键路径vm.$watch('a.b.c', function (newVal, oldVal) { // 做点什么})// 函数vm.$watch( function () {  return this.a + this.b }, function (newVal, oldVal) {  // 做点什么 })

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = vm.$watch('a', cb)// 之后取消观察unwatch()

HTML：

<div id="watch">    firstName:<input type="text" name="li" v-model="firstName">    <br>    lastName:<input type="text" name="fei" v-model="lastName">    <p>fullName: {{fullName}}</p></div>

JS：

var vm = new Vue({      el: '#watch',      data: {        firstName: 'a',        lastName: 'fei',        fullName: 'a fei'      },      watch: {        firstName: function (val) {          this.fullName = val + ' ' + this.lastName        },        lastName: function (val) {          this.fullName = this.firstName + ' ' + val        }      }})

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

关于“Vue的$watch方法怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue的$watch方法怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。