选项"/>
Vue 3 迁移策略笔记—— 第8节:Data 选项
前言
本笔记主要基于官方文档《迁移策略—— Data 选项》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
概述
data
选项的不再接受 JS 对象,只接受函数形式的声明。- 当合并来自
mixin
或extend
的多个data
返回值时,data
现在变为浅拷贝形式(只合并根级属性)。
Vue 2.x data Option 的声明
在 Vue 2.x ,声明data
有两种方式:
-
对象形式(常用于 Vue 根实例)
const app = new Vue({data: {apiKey: 'a1b2c3'} })
-
函数形式 (常用于 Vue 组件)
const app = new Vue({data() {return {apiKey: 'a1b2c3'}} })
Vue 3.x 只支持函数形式声明
Vue 3.x 对 data
的声明进行了标准化。现只接受函数形式的声明形式。
上面代码变成:
<script>import { createApp } from 'vue'createApp({data() {return {apiKey: 'a1b2c3'}}}).mount('#app')
</script>
Mixin 的改变
当组件的data
与mixin
或extends
的data
进行合并时,Vue 3.x 只进行浅拷贝形式。
如下例子:
const Mixin = {data() {return {user: {name: 'Jack',id: 1},pwd: '123456'}}
}const CompA = {mixins: [Mixin],data() {return {user: {id: 2},pwd: '121212'}}
}
Vue 2.x data
执行的结果:
{user: {id: 2,name: 'Jack'},pwd: '121212'
}
Vue 2.x 中,data
的合并是深拷贝形式。以ComA
的data
为主,Mixin
的data
里的属性将逐一跟ComA
的data
里的属性比较。如果属性ComA
data
里存在的,且是对象,则进入对象内部进行比较;若不是对象,则跳过;如果属性在ComA
data
里不存在,则直接添加到ComA
data
。
Vue 3.x data
执行结果:
{user: {id: 2},pwd: '121212'
}
Vue 3.x 是浅拷贝,所以不会进入对象的内部进行比较。因此,但 Vue 发现user
属性在ComA
的data
已经存在时,就直接跳过了。
本系列目录
-
Vue 3 迁移策略笔记—— 第1节:v-for 中的 Ref 数组
-
Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
-
Vue 3 迁移策略笔记—— 第3节:Attribute Coercion Behavior (属性强制行为)
-
Vue 3 迁移策略笔记——第4节:$attrs 包括class&style
-
Vue 3 迁移策略笔记—— 第5节:移除 $children
-
Vue 3 迁移策略笔记—— 第6节:自定义指令
-
Vue 3 迁移策略笔记—— 第7节:自定义元素交互
-
Vue 3 迁移策略笔记—— 第8节:Data 选项
-
Vue 3 迁移策略笔记—— 第9节:新增 emits 选项
-
Vue 3 迁移策略笔记—— 第10节:事件 API
-
Vue 3 迁移策略笔记—— 第11节:移除过滤器
-
Vue 3 迁移策略笔记—— 第12节:片段
-
Vue 3 迁移策略笔记—— 第13节:函数式组件
-
Vue 3 迁移策略笔记—— 第14节:全局 API
-
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
-
Vue 3 迁移策略笔记—— 第16节:Inline Template 属性
-
Vue 3 迁移策略笔记—— 第17节:Key 属性
-
Vue 3 迁移策略笔记—— 第18节:按键修饰符
-
Vue 3 迁移策略笔记—— 第19节:移除 $listeners
-
Vue 3 迁移策略笔记—— 第20节:Props 的默认值函数不能访问this
-
Vue 3 迁移策略笔记—— 第21节:渲染函数 API
-
Vue 3 迁移策略笔记—— 第22节:Slots 的统一
-
Vue 3 迁移策略笔记—— 第23节:Transition Class 的变化
-
Vue 3 迁移策略笔记—— 第24节:Transition Group 不再需要设置根元素
-
Vue 3 迁移策略笔记—— 第25节:v-on.native修饰符被移除
-
Vue 3 迁移策略笔记—— 第26节:在组件上使用 v-model 的变化
-
Vue 3 迁移策略笔记—— 第27节:v-if 和 v-for 的优先级
-
Vue 3 迁移策略笔记—— 第28节:v-bind 合并行为
-
Vue 3 迁移策略笔记—— 第29节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第8节:Data 选项
发布评论