vue动态表单中删除再添加时数据删掉的数据又补上了

vue动态表单中删除再添加时数据删掉的数据又补上了

vue动态表单中删除再添加时数据删掉的数据又补上了

可能是vue的双向绑定机制，当你删除了某个数据，vue会自动更新数据，当你再添加数据时，vue会自动将数据补上。

月2日 09:00 Vue

1.vue主动刷新页面及列表数据删除。 在场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面。2.遇到的问题用vue-router重新路由到当前页面，页面是不进行刷新.3.采用window.reload或者router.go刷新时，整个浏览器进行了重新加载，闪烁.就会好了。

div id="app">

    <button @click="setName">修改obj的name</button>

    <button @click="addSex">添加obj的sex</button>

    <button @click="delAge">删除obj的age</button>

    <h1>{{obj}}</h1>

</div>

<script src="./vue2.6.14.js"></script>

<script>

    new Vue({

        el: "#app",

        data() {

            return {

                obj:{

                    name:"张三",

                    age:20

                }

            }

        },

        methods: {

            setName(){

                /* 修改了data中的数据 视图也会发生改变

                双向数据绑定 */

                this.obj.name = '李四'

            },

            addSex(){

                /* vue2里面有个缺陷 就是添加属性的时候视图不会更新

                不能实现双向数据绑定 */

                /* this.obj.sex = '男' */

                /* 底层使用的 Object.defineProperty 可以实现修改和查看

                但是监听不到属性的添加和删除*/

                /* vue3 就不使用Object.defineProperty了，使用了proxy方法

                ，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，

                还可以实现双向数据绑定 */

                console.log(this.obj)

                /* 要解决添加属性显示在视图中，必须要使用vue

                中的$set方法去实现双向数据绑定 */

                /* this.$set(this.obj,'sex','男') */

                /* this.$forceUpdate(this.obj) */

            },

            delAge(){

                /* vue2里面不能直接使用对象删除的方法，

                实际上数据已经被删除，但是视图没有更新，

                不能实现双向数据绑定 */

                /* delete this.obj.age */

                /* vue为了解决删除数据后视图不更新的问题，提供了

                $delete方法来实现双向数据绑定 */

                /* 底层使用的 Object.defineProperty 可以实现修改和查看

                但是监听不到数据的添加和删除*/

                /* vue3 就不使用Object.defineProperty了，使用了proxy方法

                ，使用了这个方法就可以直接的使用原生的添加 和 删除方法了，

                还可以实现双向数据绑定 */

                this.$delete(this.obj,'age')

                console.log(this.obj)

            }

        },

    })

</script>

---