Vue3+.net6.0 三 响应式基础，methods，深层响应（修改对象，数组类型）

这里的示例都用选项式风格

在 Vue 3 中，数据是基于 JavaScript Proxy（代理） 实现响应式的。

这个示例中输出是false，因为当你在赋值后再访问 this.someObj，此值已经是原来的 newObj 的一个响应式代理。

需要注意的是newObj 并不会变成响应式。

<script type="module">
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                someObj:{}
            }
        },
        mounted(){
            const newObj = {};
            this.someObj = newObj;
            console.log(this.someObj === newObj);
        }
    });
    app.mount('#appDiv');
</script>

 

方法methods

和Vue2一样，声明方法都是用methods。

定义一个属性count，在方法中让 count++。

const app = createApp({
        data() {
            return {
                //someObj:{}
                count:0,
            }
        },
        methods:{
            addCount(){
                this.count++;
            }
        }
    });

页面上来个按钮

 <button @@:click="addCount">点我++</button>  {{count}}

效果跟之前的例子是一样的，点击按钮触发addCount，令count++。

 

事件参数

和Vue2一样，$event变量可以获取到原生dom事件，传递方式也同vue2。

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn(message, event) {
    // 这里可以访问 DOM 原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

 

更新时机

当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。

 

深层响应性

这个对比Vue2，在使用方面主要是影响到对象和数组类型的操作。

1.对象类型：

　　在Vue2中，为对象新增属性后，虽然成功，但是不会被监听，但是Vue3中可以。

html部分：

<p v-for="(val,key,index) in person">
        {{key}}:{{val}}
    </p>
    <button @@click="editPerson">修改person.Name</button>
    <button @@click="addPersonAttr">增加person.Age</button>

data部分：

                person:{
                    id:1,
                    name:'张三'
                },

methods部分：

            editPerson(){
                if(this.person.name=='张三')
                    this.person.name='李四';
                else 
                    this.person.name='张三';
            },
            addPersonAttr(){
                this.person.age= 30;
            }

可以看到，无论是修改对象属性值还是新增属性，都可以按我们所预想的显示出来，而在Vue2中，我们还得用Vue.set方法。

2.数组类型：

html部分：

    <p v-for="(val,index) in intArray">
        {{index}}:{{val}}
    </p>
    <button @@click="editArray">修改数组</button>&nbsp;
    <button @@click="addArray">增加数组项</button>&nbsp;
    <button @@click="spliceArray">删除数组项</button>

data部分：

 intArray:[1,3,5,7,9]

methods部分：

            editArray(){
                this.intArray[1]=0;
            },
            addArray(){
                this.intArray.push(11);
            },
            spliceArray(){
                this.intArray.splice(0,1);
            }

修改，新增元素，删除元素都能响应。

 多介绍一些常用的数组相关方法，需要注意的是是否会修改原数组。

push：数组尾部插入，会修改原数组。

pop：数组尾部删除，会修改原数组

unshift：数组头部插入，会修改原数组

shift：数组头部删除，会修改原数组

splice：常用格式为(index,count)，从index位置开始删除count个项，没有count则后续全部删除,count为0则不删除；当index为负数时，从数组尾部开始算，比如-3，表示倒数第三个数组项。会修改原数组为删除后的新数组，同时会返回删除掉的部分。

sort：顺序排序，会修改原数组。

reverse：反转数组，会修改原数组。

filter：筛选匹配的项，不会修改原数组，而是生成新的数组并返回，需要如下操作才能覆盖原数组。

this.items = this.items.filter((item) => item.message.match(/Foo/))

concat：拼接数组，不会修改原数组，返回新数组。

slice：常用格式为(start,end),截取下标start到end位置的数组；当下标为负数时，从数组尾部开始，比如（-3,-6)，表示截取倒数第三个数组项到倒数第六个数组项。不会修改原数组，返回新数组。