8000 Vue.delete & Vue.set 无法触发watch · Issue #2036 · vuejs/vue · GitHub
[go: up one dir, main page]
Skip to content

Vue.delete & Vue.set 无法触发watch #2036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
gebilaoxiong opened this issue Dec 16, 2015 · 7 comments
Closed

Vue.delete & Vue.set 无法触发watch #2036

gebilaoxiong opened this issue Dec 16, 2015 · 7 comments

Comments

@gebilaoxiong
Copy link
Member

您好，上次拜读您代码的时候还是0.11版本，非常喜欢。最近Vue升级到了1.0X版本，于是又读了一遍

在断点的时候遇到个问题：

按照您的设计：对象和数组中____ob____的dep是用来监控数组结构的，在数组中任何改变数组结构的方法('push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse')都会调用数组的____ob____.dep.notify。按照这个逻辑在对象结构发生变化的时候是不是也会调用对象的____ob____.dep.notify; 不知道是不是我的理解有误，下面的代码没有触发watcher的update。

以下是测试代码：

    var testVM = new Vue({
      el:'#ct',
      data: {
        name: '测试人员',
        info: {
          age: 12,
          school: '测试学校'
        },
        frends: [{}]
      }
    });

    testVM.$watch('info', function() {
      console.log('info 的 wather');
    });

    Vue.delete(testVM.info, 'age');  //info 的wath处理函数并没有触发
@luckymore
Copy link

@gebilaoxiong 大哥，你试试用testVM.$delete('age');

@luckymore
Copy link

@gebilaoxiong work well

var testVM = new Vue({
      el:'#ct',
      data: {
        name: '测试人员',
        info: {
          age: 12,
          school: '测试学校'
        },
        frends: [{}]
      }
    });

    testVM.$watch('info', function(n, o) {
      alert(n + " " + o);
      testVM.$delete('info.age');
    });
<div id="ct">
  <input type="text" v-model="info.age">{{info.age}}
</div>

@gebilaoxiong
Copy link
Member Author

@luckymore 按照他的设计，删除info.age的时候，监控info的watch应该被触发

@luckymore
Copy link

你的使用方式不对吧，确实触发了。

@gebilaoxiong
Copy link
Member Author

@luckymore 我的意思是在代码中操作删除age
你的代码意思是修改age，然后在监控中删除他。

但是，貌似你的删除操作也没有生效。

明白吗

@hbrls
Copy link
hbrls commented Dec 17, 2015

我好像也遇到过，后来换 vuex 就没继续跟进了

@yyx990803
Copy link
Member

这里确实有些不一致，现版本修改对象的结构需要 deep watcher 才会触发:

testVM.$watch('info', function() {
  console.log('info 的 wather');
}, { deep: true });

下个版本不需要 deep 也会触发。

@gebilaoxiong gebilaoxiong mentioned this issue Dec 21, 2015
Merged
@gebilaoxiong gebilaoxiong mentioned this issue Sep 10, 2016
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @hbrls @luckymore @gebilaoxiong
0