- 因为需要遍历data对象上所有属性,所以如果data对象属性结构嵌套很深,就会存在性能问题。
- 因为需要遍历属性,所有需要提前知道对象上有哪些属性,才能将其转化为getter和setter,所以vue2中无法将data新增的属性转为响应式,只能通过vue提供的vue.set或者this.$set向data中嵌套的对象新增响应式属性,而这种方式并不能添加根级别的响应式属性。
- 不能通过下表或者length属性响应式地改变数组,而是必须用数组的方法push,pop,shift,unshift,splice来响应式的改变数组。
- 在vue3中使用proxy这个特性,替换了Object.defineProperty重构响应式系统,使用Proxy优势,直接可以监听数组类型的变化,监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升,可以拦截apply,ownKeys,has等13种方法,而Object.defineProperty不行。直接实现对象属性的新增删除。
vue3支持大多数vue2的特性,vue2添加Object数据需this.$set或Vue.set,删除需要Vue.delete或者可能得使用其他得一些办法来解决这个问题。vue3添加Obect数据删除都是响应式。
a. setup函数是一个新的组件选项,作为CompositionApi的入口点。
b. 接受两个参数props和context(attrs,slots,emit)
1. attrs:值为对象,包含组件外部传递过来,但没有在props配置中声明的属性,相当于vue2种的this.$attrs。2. slots:收到的插槽内容,相当于this.$slots。
3. emit:分发自定义的事件的函数,相当于this.$emit。
执行时机:setup处于beforeCreate生命周期钩子之前的函数
返回值:
1. 返回一个对象,对象中的属性,方法,在模板中均可以直接使用
2. 返回一个渲染函数,子当以渲染内容代替模板
setup执行时机在beforeCreate之前执行,将beforeDestroy改名为beforeUnmount,destroyed改名为unmounted
钩子 | 说明 |
---|---|
setup() | 开始创建组件之前,在beforeCreate之前执行,创建的是data,method。 |
onBeforeMount() | 组件挂载到节点上之前执行的函数 |
onMounted() | 组件挂载完成后执行的函数 |
onBeforeUpdate() | 组件更新之前执行的函数。 |
onUpdated() | 组件更新完成之后执行的函数 |
onBeforeUnmount() | 组件卸载之前执行的函数。 |
onUnmounted() | 组件卸载完成后执行的函数。 |
onActivated() | 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。 |
onDeactivated() | 若组件实例是 缓存树的一部分,比如从 A 组件,切换到 B 组件,A 组件消失时执行。 |
onErrorCaptured() | 在捕获了后代组件传递的错误时调用。 |
watch可以接收三个参数,第一个是要监听的对象,第二个是数据处理变化,第三个是配置项(options),其中options:immediate:true刚一进去就监听一次。
六、setup语法糖
vue3-01-study
。package.json
文件。npm install vue@3.2.47
,安装完成后在package.json
中的dependencies
会增加相关依赖信息。01-helloworld.html
文件
标签引入 Vue 3 库
vue.global.js
中会暴露出全局对象 Vue所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。
- 从 Vue 对象中解构出 createApp 函数,用于实例化 Vue 应用程序:
const { createApp } =Vue;
- mount 函数:用于挂载应用,指定被 Vue 管理的 Dom 节点入口,节点必须是一个普通的 HTML标签节点,一般是 div。参数值:可以是 DOM 元素或 CSS 选择器字符串。注意:参数值不要指定html 或 body。
注意:
.mount() 函数应该始终在整个应用配置和资源注册完成后被调用。data 必须是一个函数:指定初始化数据,在 Vue 所管理的 Dom 节点下,可通过模板语法来进行使用。
- 标签体显示数据:
{{}}
- 表单元素双向绑定数据:
"v-model"
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.定义根节点元素 -->
<div id="app">
<p>Hellow Word,{{msg}}</p>
<input type="text" v-model="msg">
</div>
</body>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script type="text/javascript">
//Vue是vue.global.js中暴露出来的全局对象,所有顶层API都以属性的形式暴露在了全局的vue对象上
const {createApp} = Vue
//每个Vue应用都是通过createApp函数创建一个新的应用实例
const app = createApp({
data(){
return {
msg:'hellow Vue3'
}
}
}).mount('#app')
// mount挂在应用节点,mount函数的参数值是dom元素或者css选择器字符串,不要指定html或body,注意".mount"函数应该始终在整个用用配置和支援注册完成后被调用
console.log("app",app)
</script>
</html>
分析MVVM模型
什么是MVVM模型?
MVVM是Model-view-viewModel的缩写,它是一种软件架构风格,其中model为模型,数据对象,view为视图,视图模板页面,viewModel为视图模型,其实本质上就是vue实例。
把需要改变视图的数据初始化到vue中,然后再通过修改Vue中的数据,从而实现对视图的更新,按照vue的特定语法进行声明开发,就可以实现对应功能,不需要直接操作Dom元素,JQuery就是,需要手动去操作DOM才能实现对应功能。
模板数据绑定渲染
可生成动态的HTML页面,页面中使用嵌入Vue.js语法可动态生成
- {{}} 双大括号文本绑定。
- v-标签属性名,以v-开头用于标签属性绑定,成为指令。
双大括号语法{{}}
在vue3-01-study
下创建一个02-模板数据绑定渲染.html
格式
{{表达式}}
作用
使用在标签体中用于获取数据可以使用JavaScript表达式
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1.定义根节点元素 -->
<div id="app">
<p>Hellow Word,{{msg}}</p>
<h2>1、双大括号输出文本内容</h2>
<p>普通文本:{{ name }}</p>
<p>JS表达式1:{{ salary + 10 }}</p>
<p>JS表达式2:{{ Math.abs(salary) }}</p>
</div>
</body>
<script src="./node_modules/vue/dist/vue.global.js"></script>
<script type="text/javascript">
//Vue是vue.global.js中暴露出来的全局对象,所有顶层API都以属性的形式暴露在了全局的vue对象上
const {createApp} = Vue
//每个Vue应用都是通过createApp函数创建一个新的应用实例
const app = createApp({
data(){
return {
msg:'hellow Vue3',
salary:-100,
}
}
}).mount('#app')
// mount挂在应用节点,mount函数的参数值是dom元素或者css选择器字符串,不要指定html或body,注意".mount"函数应该始终在整个用用配置和支援注册完成后被调用
console.log("app",app)
</script>
</html>
文本显示指令v-text和v-cloak
使用
说明
v-text
等价于{{}}用于显示内容,且会覆盖元素中所有现有的内容。区别在于{{}}会有闪烁双大括号表达式问题,v-text不会闪烁。例:
v-cloak
用于吟唱未完成编译的DOM模板,默认一开始被Vue管理的模板是隐藏的,当Vue解析处理完DOM模板之后,会自动把这个样式去除,然后就显示出来。如果还想用{{}}又不想又闪烁问题,则使用v-cloak处理,1. 添加一个属性选择器[v-cloak]{display:none}。2.在vue管理的模板入口节点上作用v-cloak,指令也可以做用到子元素上
输出HTML指令 v-html
v-html
- 如果是HTML格式数据,双大括号会将数据解释为普通文本,为了输出真正的 HTML,你需要使用 v-html 指令。
- v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法不会被解析的。
- Vue 为了防止 XSS 攻击,在此指令上做了安全处理,当发现输出内容有Vue 模板语法、script 标签等,则不被解析。
注意: