当前位置：首页 > news >正文

vue.js 拷贝数组和对象_【图文并茂，点赞收藏哦！】重学巩固你的Vuejs知识体系...

news 来源：原创 2024/5/6 22:45:42

前沿

内容过多，长达7万字无法显示，请到掘金上看https://juejin.im/post/5e6e2a5a5188254974680f6a

置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！重学巩固你的Vuejs知识体系，如果有哪些知识点遗漏，还望在评论中说明，让我可以及时更新本篇内容知识体系。欢迎点赞收藏！

转角遇到Vuejs

你为啥学习Vuejs
前端开发的复杂化
Vuejs的特点
安装Vuejs
体验Vuejs
MVVM架构：data和Vue对象的分离，Vue中的MVVM

插值语法：Mustache，v-once，v-html，v-text，v-pre，v-block。
绑定属性：v-bind的介绍，v-bind的基础，v-bind的语法糖，绑定class，绑定样式。
计算属性
事件监听：v-on介绍，v-on基础，v-on参数，v-on修饰符
条件和循环：条件渲染，v-show指令，v-if和v-show对比
表单绑定：基本使用，v-model原理，其他类型，值绑定，修饰符。

组件化开发：

什么是组件化，Vue组件化开发思想

注册的步骤
全局和局部组件
父组件和子组件
注册组件语法糖
模板的分离写法
组件的其他属性
父级向子级传递
子级向父级传递
父子组件的访问
非父子组件通信

组件化高级语法：

插槽slot：编译作用域，为什么使用slot，slot的基本使用，slot的具名插槽，slot的作用域插槽。
动态组件
异步组件
组件声明周期

Vue Cli

什么是webpack
webpack和gulp对比
手动webpack的配置
Vue Cli是什么
Vue Cli依赖环境
Vue Cli的安装

网络封装

使用传统的Ajax是基于XMLHttpRequest(XHR)
使用jQuery-Ajax
Vue-resource
使用axios

axios的使用

了解axios：axios请求方式
发送请求，发送get请求，发送并发请求，axios全局配置，常见配置选项。
axios实例，为什么创建axios实例，如何创建axios实例，axios的封装。
axios的拦截器：请求和响应

vuejs原理相关：响应式原理，源码。

vue.js是什么

vue是一套用于构建用户界面的渐进式框架。
从底向上逐层应用，核心库是只关注图层。
易于学习，便于与第三方库或既有项目整合。

Vue基础语法

对于基础知识需要掌握，简单写写✍

vue.js安装

直接CDN引入：

对于制作原型或学习

代码：

对于生产环境

代码：

# 最新稳定版$ npm install vue

vue响应式初体验

声明式编程：

代码：

{{ a }}

   // 我们的数据对象 var data = { a: 1 };  // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ el: "#app", data: data });  // data.a = "dada" vm.a = "qianduan"; data.a == vm.a;

小案例-计算器

新的属性：methods，该属性是用于Vue对象中定义的方法。
新的指令：@click，该指令是用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法。

代码：

`当前计数{{counter}}`

+ -

 let app = new Vue({ el: '#app', data: { counter: 0 }, methods: { increment(){ this.counter++ }, decrement(){ this.counter-- }, } })

Vue中的MVVM

MVVM的思想

view是我们的DOM
Model是我们抽离出来的obj
ViewModel是我们创建的Vue对象实例

它们之间是如何工作的呢？

ViewModel通过Data Binding让obj中的数据实时在DOM中显示
ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据

el:类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM
data:类型：Object | Function
作用：Vue实例对应的数据对象
methods:类型：{[key:string]:Function}
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

什么是Vue的生命周期

生命周期：☞ 事物从诞生到消亡的整个过程

release稳定版本
debug版本

Mustache语法也就是双大括号
插值操作
绑定属性
计算属性
事件判断
循环遍历
阶段案例
v-model

v-once指令的使用

`{{message}}`

v-once：

该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

v-html：

当我们从服务器请求到的数据本身就是一个HTML代码时

如果直接通过{{}}来输出，会将HTML格式进行解析，并且显示对应的内容。
可以使用v-html指令
该指令后跟上一个string类型
会将string的html解析处理并且进行渲染

v-text的作用和Mustache比较相似，独使用于将数据显示在界面中，一般情况下，接受一个string类型。

`{{message}}`

let vm = new Vue({ el: '#app', data: { message: '你好' } })

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

{{message}}

let app = new Vue({ el: '#app', data: { message: 'hello' } })

v-cloak斗篷的意思。

`hello{{name}}`

setTimeout(()=>{ let app = new Vue({ el: '#app', data: { name: 'web' } }) },10000) [v-cloak] { display: none; }

v-bind的介绍

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值。

vuejs

let app = new Vue({ el: '#app', data: { } })

v-bind语法糖

v-bind有一个对应的语法糖，就是简写方式

vuejs

v-bind动态绑定class

 .active{     color: red; }

`{{message}}`

const app = new Vue({ el: '#app', data: { message: 'hello' } })

绑定class有两种方式：

对象语法
数组语法

对象语法：

用法一：直接通过{}绑定一个类

`hello`

用法二，传入多个值

`hello`

用法三：

用法四：可以放在一个methods或者computed中

`hello`

v-bind动态绑定class，数组语法

`{{mesg}}`

 const app = new Vue({ el: '#app', data: { message: 'hello', active: 'aaa', line: 'bbb', }, methods: { getClasses: function() { return [this.active, this.line] } } })

v-bind动态绑定style

对象语法和数组语法两种绑定。

绑定方法：对象语法：

:style="{ color: currentColor, fontSize: fontSize + 'px' }"

style后面跟的是一个对象类型，对象的key是css属性名称，对象的value是具体赋的值，值可以来自于data中的属性。

绑定方法：数组语法：

style后面跟的是一个数组的类型，多个值，分割即可。

计算属性的基本属性

计算属性，写在实例的computed选项中：

`{{firstName}}{{lastName}}`

const vm = new Vue({ el: '#app', data: { firstName: 'web', lastName: 'it', } })

`{{fullName}}`

 const vm = new Vue({ el: '#app', data: { firstName: 'jeskson', lastName: 'it', }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } })

计算属性的缓存：

为什么使用计算属性这个东西？

原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

setter和getter

每个计算属性都包含一个getter和一个setter

{{fullName}}

{{firstName}}

{{lastName}}

 let vm = new Vue({ el: '#app', data: { firstName: 'web', lastName: 'it', }, computed: { fullName: { get() { rturn this.firstName+" "+this.lastName }, set(newValue){ const names = newValue.split(' ') this.firstName = names[0] this.lastName = names[1] } } } })

computed: {    fullName: function() {        return this.firstName+" "+this.lastName    }        // 计算属性一般是没有set方法，只读属性。    fullName: {        get: function() {            return this.firstName + " " + this.lastName        }    }}

const的使用

const的使用，在JavaScript中使用const修饰的标识符为常量，不可以再次赋值。

在es6开发中，优先使用const，只有需要改变一个标识符的时候才使用let。

在使用cost定义标识符，必须进行赋值。

常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

什么时候使用const呢？

当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性。

const的使用：

const a=20;a = 10; // 错误：不可以修改const name; // 错误，const修饰的标识符必须赋值

let和var

块级作用域：

JS中使用var来声明一个变量，变量的作用域主要是和函数的定义有关。

对于其他块定义来说是没有作用域的，比如if/for等，开发中往往会引发一些问题。

// 监听按钮的点击var btns = document.getElementsByTagName('button');for(var i=0; i    (function(i){        btns[i].onclick = function(){            alert('点击了'+i+"个")        }    })(i)}

let btns = document.getElementsByTagName('button');for(let i=0;i    btns[i].onclick = function(){        alert('点击了'+i+'个')    }}

块级作用域

变量作用域：变量在什么范围内是可用的。

var func;if(true) {    var name = 'web';    func = function() {        console.log(name); // web    }        func(); // web}// name = 'it'func(); // web -> itconsole.log(name); // web -> it

没有块级作用域引起的问题，for的块级

var btns = document.getElementsByTagName('button');for(var i=0; i    btns[i].addEventListener('click', function(){        console.log('第'+i+'个按钮被点击');    })}

闭包：

var btns = document.getElementsByTagName('button');for(var i=0; i    (function(i){        btns[i].addEventListener('click', function(){          console.log('第'+i+'个按钮');          })    })(i)}

为什么闭包可以解决问题，因为函数是一个作用域。

对象的增强写法

属性初始化简写和方法的简写：

// 属性的简写// es6前let name = 'web'let age = 12let obj1 = {    name: name,    age: age,}console.log(obj1);// es6后let obj2 = {    name, age}console.log(obj2)

// 方法的简写// es6之前let obj1 = {    test: function() {        console.log('obj1')    }}obj1.test();// es6后let obj2 = {    test() {        console.log('obj2')    }}obj2.test();

v-on基础

v-on:click="counter++"

`点击次数:{{counter}}`

按钮点击按钮点击2

let app = new Vue({ el: '#app', data: { counter: 0 }, methods: { btnClick(){ this.counter++ } }})

v-on修饰符的使用

web 按钮

Vue提供了一些修饰符：

.stop 调用event.stopPropagation().prevent 调用event.preventDefault().native 监听组件根元素的原生事件.once 只触发一次回调

// 停止冒泡// 阻止默认行为// 阻止默认行为，没有表达式// 串联修饰符// 键修饰符，键别名// 键修饰符，键代码// 点击回调智慧触发一次

`v-if,v-else-if,v-else`

简单使用：

优秀

良好

及格

不及格

登录切换：

用户账号：邮箱地址：切换类型

 let app = new Vue({ el: '#app', data: { type: 'username' }, methods: { handleToggle(){ this.type = this.type === 'email' ? 'username' : 'email' } } })

用户账户用户邮箱切换类型

const app = new Vue({ el: '#app', data: { isUser: true }})

`v-for遍历对象`

{{value}}-{{key}}-{{index}}

let app = new Vue({ el: '#app', data: { info: { name: 'web', age: 12, } } })

`组件的Key属性`

使用v-for时，给对应的元素或组件添加上一个:key属性。

key的作用主要是为了高效的更新虚拟dom。

数组中哪些方法是响应式的

push()pop() 删除数组中的最后一个元素shift() 删除数组中的第一个元素unshift() 在数组最前面添加元素splice()sort()reverse()

`购物车`

书籍名称出版日期价格购买数量操作{{value}}

`表单绑定v-model`

vue中使用v-model指令来实现表单元素和数据的双向绑定。

`{{message}}`

reduce作用对数组中所有的内容进行汇总。

JavaScript reduce() 方法

var numbers = [65, 44, 12, 4]; function getSum(total, num) {    return total + num;}function myFunction(item) {    document.getElementById("demo").innerHTML = numbers.reduce(getSum);}

定义和用法

reduce() 方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

`v-model的使用以及原理`

 const app = new Vue({  el: '#app',  data: {      message: '你好啊'  },  methods: {      valueChange(event){          this.message = event.target.value;      }  } })

v-model是语法糖，本质：

v-bind绑定一个value属性v-on指令给当前元素绑定input事件

代码：

`父组件和子组件`

组件树

组件和组件之间存在层级关系其中一种非常重要的关系就是父子组件的关系

示例：

 // 创建一个子组件构造器 const childComponent = Vue.extend({  template: `

我是子组件的内容

` }) // 创建一个父组件的构造器 const parentComponent = Vue.extend({ template: `

我是父组件的内容

 ` components: { 'child-cpn': childComponent } }) let app = new Vue({ el: '#app', components: { 'parent-cpn': parentComponent } })

注册组件的语法糖

示例：全局组件

 // 全局组件注册的语法糖 // 注册组件 Vue.component('cpn1', {  template: `

`web`

` }) const app = new Vue({ el: '#app', data: { message: 'web', } })

// 注册局部组件的语法糖const app = new Vue({ el: '#app', data: {     message: 'web' }, components: {     'cpn2': {         template: `

`web`

` } }})

vue简化了注册组件的方式，提供了注册的语法糖。

`组件模板抽离的写法`

vue提供了两种定义html模块内容：

使用标签使用标签

示例：

`web`

let app = new Vue({ el: '#app', components: { 'my-cpn': { template: '#myCpn' } } })

template标签

`web`

// 注册一个全局组件Vue.component('cpn', { template: '#cpn'})

组件可以访问vue实例数据吗

组件是一个单独的功能模块封装，有属于自己的html模板和自己的数据data。

组件对象有一个data属性，methods属性，这个data属性必须是一个函数，函数返回一个对象，对象内部保存着数据。

{{message}}

let app = new Vue({ el: '#app', components: { 'my-cpn': { template: 'myCpn', data() { return{ message: 'web' } } } }})

`父子通信-父传子props`

如何进行父子组件间的通信呢？

通过props向子组件传递数据通过事件向父组件发送消息

props基本用法

在组件中，使用props来声明从父级接收到的数据

props值：

字符串数组，数组中的字符串就是传递时的名称。对象，对象可以设置传递时的类型，也可以设置默认值等。

camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {  // 在 JavaScript 中是 camelCase 的  props: ['postTitle'],  template: '

`{{ postTitle }}`

'})

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

prop 各自的名称和类型：

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor}

  v-bind: by ' + post.author.name">

传入一个对象的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)：

post: {  id: 1,  title: 'My Journey with Vue'}  v-bind:id="post.id"  v-bind:>

一个简单的props传递：

显示信息：{{message}}

let app = new Vue({ el: '#app', data: { message: 'hello' }, components: { 'child-cpn': { templte: '#childCpn', props: ['message'] } }})

在 Vue 中，父子组件的关系

props向下传递，事件向上传递。

父组件通过 props给子组件下发数据，子组件通过事件给父组件发送消息。

props支持的数据类型：

StringNumberBooleanArrayObjectDateFunctionSymbol

示例：

Vue.component('my-component',{ props: {     // 基础的类型检查     propA: Number,     // 多个可能的类型     propB: [String, Number],     // propC: {         type: String,         required: true     },     // 带有默认值的数字     propD: {         type: Number,         default: 100     },     // 带有默认值的对象     propE: {         type: Object,          default: function(){              return {message: 'web'}          }     },     // 自定义验证函数     propF: {         vfunc: function(value) {             return value > 1         }     } }})

子传父

代码：

this.$emit('item-click',item)

props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。

自定义事件：

在子组件中，通过$emit()来触发事件。在父组件中，通过v-on来监听子组件事件。

自定义事件代码：

`点击次数`

+1 -1

let app = new Vue({ el: '#app', data: { total: 0 }, methods: { changeTotal(counter) { this.total = counter } }, components: { 'child-cpn': { template: '#childCpn', data(){ return{ counter: 0 } }, methods: { increment(){ this.counter++; this.$emit('increment', this.counter) }, decrement(){ this.counter--; this.$emit('decrement',this.counter) } } } }})

`父子组件的访问方式：$children`

有时候需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问父组件。

父组件访问子组件，使用$children或者$refs子组件访问父组件，使用$parent

对于$children的访问：

this.$children是一个数组类型，它包含所有子组件对象。通过遍历，取出所有子组件的message状态。

示例：

// 父组件template

显示所有子组件信息

// 子组件

`我是子组件1`

// 子组件

`我是子组件2`

Vue.component('parent-cpn',{ template: '#parentCpn', methods: { showChildCpn(){ for(let i=0; i console.log(this.$children[i].message) } } }})

`父子组件的访问方式：$parent`

子组件中直接访问父组件，可以通过$parent

虽然可以通过$parent来访问父组件，但是尽量不要这样做子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。

父子组件的访问方式$refs

$children的缺陷：

通过$children访问子组件，是一个数组类型，访问其子组件要通过索引值。子组件过多时，需要拿其中一个时，不能确定它的索引值，还可能发生变化。获取其中一个特定的组件，可以使用$refs

$refs的使用：

$refs和ref指令通常一起使用通过ref给某个子组件绑定一个特定的id通过this.$refs.id可以访问到该组件

示例：

通过refs访问子组件show() {    console.log(this.$refs.child1.message);    console.log(this.$refs.child2.message);}

看看一个.vue文件项目

: @click="itemClick(index)" v-for="(item,index) in titles"> {{item}}

 export default { name: 'xxx', props: { titles: { type: Array, default() { return [] } } }, data: function() { return { currentIndex: 0 } }, } .xxx { xxx: xxx; }

`slot插槽的使用`

vue中的代码slot是什么呢，它叫插槽，元素作为组件模板之中的内容分发插槽，传入内容后元素自身将被替换。

v-slot用法：

默认插槽具名插槽作用域插槽slot以及slot-scope的用法：子组件编写，父组件编写

默认插槽

子组件：

// 子组件

// 默认插槽默认值

slot基本使用

在子组件中，使用可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。

子组件定义一个插槽：

中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示改内容。

示例：

web

我是谁

Vue.component('my-cpn',{ template: '#myCpn'})let app = new Vue({ el: '#app'})

使用具名插槽

给slot元素添加一个name属性

示例：

// 没有任何内容 // 传入某个内容 left left center right

1 2 3

Vue.component('my-cpn', { template: '#myCpn' }) let app = new Vue({ el: '#app' })

编译作用域

Vue实例属性：

父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。

父组件替换插槽的标签，但是内容由子组件来提供。

`生命周期`

首先：new Vue(),new一个Vue的实例，Observe data数据查看，init Events绑定事件，created执行created方法，判断是否有el属性，如果没有，vm.$mount(el)表示处于未挂载状态，可以手动调用这个方法来挂载。判断是否有template属性。

如果有el属性，判断是否有template属性。

实例化期和加载期创建期间的生命周期函数：beforeCreate 和 created，beforeMount 和 mounted。

beforeCreate在实例初始化后，数据观测data observer和event/watcher事件配置之前被调用。

更新期

运行期间的生命周期函数：beforeUpdate 和 updated

created实例已经创建完成后被调用。

实例已完成以下的配置：数据观测data observer，属性和方法的运算，watch/event事件回调。

挂载阶段还没开始，$el属性目前不可见。

beforeMount在挂载开始之前被调用，相关的render函数首次被调用。mounted，vm.$el已经挂载在文档内，对已有dom节点的操作可以在期间进行。beforeUpdate数据更新时调用，发生在虚拟dmo重新渲染和打补丁之前。updated当这个钩子被调用时，组件dom已经更新，所以你现在可以执行依赖于dom的操作。activated，deactivated，beforeDestroy，destroyed。实例销毁之前调用，vue实例销毁后调用。

卸载期

销毁期间的生命周期函数：beforeDestroy 和 destroyed

实例生命周期钩子

每个vue实例在被创建时都要经过一系列的初始化过程，需要设置数据监听，编译模板，将实例挂载到dom并在数据变化时更新dom等，同时在这个过程中也会运行一些叫做生命周期钩子的函数。

用于给用户在不同阶段添加自己代码的机会。

beforeCreate，此时的data是不可见的

data() {    return {        a: 1    }},beforeCreate() {    // red    console.log(this.a); // 看不见}

created实例已经创建完成后被调用，这个时候你看不见你页面的内容，实例已完成表示：数据观测data observer，属性和方法的运算，watch/event事件回调。

这个时候挂载阶段还没开始，$el属性目前不可见。

export default {    data() {        return {            a: 1        }    },    beforeCreate() {        console.log(this.a);    },    created() {        // red        console.log(this.a);        console.log(this.$el);        // 此时data数据里面的a可见，this.$el不可见    }}

beforeMount在挂载开始之前被调用，相关的render函数首次被调用。

export default{    data() {        return {            a: 1        }    },    beforeCreate() {        console.log(this.a); // 不可见    },    created() {        console.log(this.a);        console.log(this.$el); // 不可见    },    beforeMount() {        console.log(this.$el); // 不可见    }}

mounted：

export default {    data() {        return {            a: 1        }    },    mounted() {        console.log(this.$el); // 此时$el 可见    }}

beforeUpdate钩子，dom更新之前调用：

beforeUpdate() {    console.log(this.a);}// document.getElementById("web").innerHTML

updated钩子，dom更新之后调用：

updated() {    console.log(this.a);}// document.getElementById("web").innerHTML

activated和deactivated(组件)

activated() {    console.log("组件使用了");},deactivated() {    console.log("组件停用了");Data to Drag}

beforeDestroy和destroyed

beeforeDestroy类型为function，详细：实例销毁之前调用，在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroyed类型为function，详细：vue实例销毁后调用，调用后，vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

beforeRouteEnter和beforeRouteLeave

beforeRouteEnter() {    console.log('beforeRouteEnter')},beforeRouteLeave() {    console.log('beforeRouteLeave')}

vue路由使用的，路由进去和路由离开的时候添加的。

created() {    console.log('开始执行created钩子函数')    // 获取data数据    console.log('获取created属性'+this.value)    // 获取页面元素    console.log(this.$refs['example'])    this.$nextTick(()=>{        console.log('执行created创建的this.$nextTick()函数')    })},mounted() {    console.log('开始执行mounted钩子函数')    // 获取挂载数据    console.log('获取挂载数据--'+this.$refs['example'].innerText)    this.$nextTick(()=>{        console.log('执行mounted创建的this.$nextTick()函数')    })},methods: {    // 更新数据    updateDate(){            },    get(){        this.value='更新data内的value属性值'        // 获取页面元素数据        console.log(this.$refs['example').innerText)        this.$nextTick(()=>{          console.log(this.$refs['example'].innerText)          })    }}

var vm=new Vue({})表示开始创建一个Vue的实例对象，init events&liftcycle表示刚初始化了一个vue空的实例对象，这个时候，对象身上，只有默认的一些生命周期函数和默认事件，其他东西都没有创建，beforeCreate生命周期函数执行的时候，data和methods中的数据都没有初始化。在created中，data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，只能在created中操作。然后vue开始编辑模板，把vue代码中的那些指令进行执行，最终在内存中生成一个编译好的最终模板字符串，渲染为内存中的dom，此时只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。beforeMount函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去。create vm.$el and replace 'el' with it这一步是将内存中编译好的模板，真实的替换到浏览器的页面中去。mounted，只要执行完了mounted，就表示整个vue实例已经初始化完了。此时，组件从创建阶段进入到了运行阶段。

beforeUpdate执行的时候，页面中显示的数据还旧的，而data数据是最新的，页面尚未和最新的数据保持同步。updated事件执行的时候，页面和data数据已经保持同步了，都是新的。virtual dom re-render and patch执行，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存dom树，当最新的内存dom树被更新之后，会把最新的内存dom树，重新渲染到真实的页面中，完成数据从data到view的更新。