vuejs怎么watchvue watch 对象属性里某个属性的变化

来源：蜘蛛抓取(WebSpider) 时间：2017-06-07 13:56 标签： vue.js watch deep
在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。
&div id="example"&
a={{ a }}, b={{ b }}
var vm = new Vue({
el: '#example',
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
这里我们声明了一个计算属性&b。我们提供的函数将用作属性&vm.b的 getter。
console.log(vm.b) // -& 2
console.log(vm.b) // -& 3
你可以打开浏览器的控制台，修改例子的 vm。vm.b&的值始终取决于&vm.a&的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道&vm.b&依赖于&vm.a，因此当&vm.a&发生改变时，依赖于&vm.b&的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。
计算属性 vs. $watch
Vue.js 提供了一个方法&$watch，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时，&$watch&很诱人 && 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的&$watch&回调。考虑下面例子：
&div id="demo"&{{fullName}}&/div&
var vm = new Vue({
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
上面代码是命令式的重复的。跟计算属性对比：
var vm = new Vue({
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
更好，不是吗？
计算 setter
计算属性默认只是 getter，不过在需要时你也可以提供一个 setter：
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
现在在调用&vm.fullName = 'John Doe'&时，setter 会被调用，vm.firstName&和vm.lastName&也会有相应更新。
阅读(...) 评论()开始用vue会把所有的模版上的数据都放到data属性里，或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了，后来看到同组的同事在用computed属性，就又去查了一下api，发现这种情况其实最好用的就是computed。
1. computed可以保持模版的清晰，在template里尽量只进行展示和绑定，而不要加入逻辑操作。
2. 用computed的还有一个好处就是会跟随其他data属性的变化自动变化，比如官方文档的一个例子：
var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
如果用watch就会产生代码的冗余，比如在直播中状态的变化就可以用来计算是否展示视频之类的上层属性
var vm = new Vue({
el: '#demo',
firstName: 'Foo',
lastName: 'Bar'
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
阅读(...) 评论()你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
vueJS中watch的item值拿不到老数据
我想通过vue的watch功能监听一个对象中数据的具体变化
handler: function (val, oldVal) {
$.each(oldVal, function (k, v) {
if (v != val[k])
('变化发现：', v, val[k]);
immediate: true,
deep: true
&input type="text" v-model='item.name' / &
结果发现 val 和oldVal的值都一样
item是一个对象
item是通过v-model 绑定到input上的
每次更改item的值是成功调用了function的，拿到的val的值是新值，但是oldVal也是新值
见 warning:
要回复讨论请先或
积分 : 1995
关注: 5 人
1 个回答, 148 个赞同问题： (vue.js)怎么让data里面的字段和props的属性同步？
描述:在data这边配置的id和label怎么渲染到标签上呢解决方案1:Vue.extend({
props: ['id'],
id (value) {
// 将 value 赋给 data
})解决方案2:麻烦一点就是，在method中，使用到数据时再进行赋值构建解决方案3:直接贴代码了我vue也是初学， 请指教&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&playground&/title&
//在html中定义子组件。 v-bind的缩写语法，将父组件的'id'绑定到子组件里的'id'上。 这里是单向绑定， 如需双向绑定， 可以使用.sync字面量。 具体请参见文档。
&ui-button :id="id" :label="label"&&/ui-button&
&script src="vue.js"&&/script&
el: "#app",
data: function() {
//定义父组件中的数据
message: '1211',
id:'buttonId',
label:'buttonLabel'
components: {
//定义子组件
'ui-button':{
//期待从父组件中传来的数据
props: ['id', 'label'],
template: '&button type="button" v-bind:id="id" v-text="label"&&/button&'
&/html&...props的语法好像不是这样的吧应该在子组件的extend内以数组的形式指定期望从父组件传来的数据/方法<ponent('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '&span&{{ msg }}&/span&'
})然后在父组件里显式传入要传递下去的数据/方法&child v-bind:msg="parentMsg"&&/child&可以看看vue.js的文档https://cn.vuejs.org/guide/co...
以上介绍了“ (vue.js)怎么让data里面的字段和props的属性同步？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/3169370.html
上一篇： 下一篇：

我要回帖

更多关于 vue.js watch deep 的文章

 

随机推荐