下面的代码是一个简单的不能再简单的 vue 实例, 运行后可尝试点击 "aa"
1. 如果按正常写法, 以数据驱动为核心, 我们是不会在 del 方法里先执行 dom 的移除操作的, 直接交给 vue 操作 data 就好了, 会自动响应到视图上的
2. 但是如果我们闲的蛋疼, 就想先移除 dom, 再删数据, 按正常理解来想, 应该也不会和上面正常的结果有什么差别.
3. 但是就是有差别了. 当我们点击删除 "aa" 的 div 的时候, 会发现 "bb" 也被同时删除了.
4. 同时 $nextTick 里的输出成了 "bb", 但是如果你再输出处理后的 data, 会发现就是正常的 "['bb']".
- <html>
- <head>
- <title>Vue data</title>
- <meta charset="utf-8" />
- </head>
- <body>
- <div id="App">
- <div v-for="item of list" :id="item" @click="del(item)">{{item}}</div>
- </div>
- <script src="https://cdn.jsdelivr.NET/NPM/vue"></script>
- <script>
- var App = new Vue({
- el: '#App',
- data: {
- list: ['aa','bb']
- },
- methods:{
- del(item){
- let clone = document.querySelector('#'+item);
- clone.remove();
- this.list = this.list.filter(e=>{
- return e!=item;
- })
- this.$nextTick(()=>{
- console.log(clone.id); //bb
- })
- }
- }
- })
- </script>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/18483/0cad3ee5871aa4f2d757e197158ba291.html