文章目录
一、Vue3 改变
1、性能提升
(1)打包大小减少41%
(2)初次渲染快55%,更新渲染快133%
(3)内存减少54%
2、源码的升级
(1)使用Proxy代替defineProperty实现响应式
(2)重写虚拟DOM的实现和Tree-Shaking
3、拥抱TypeScript
Vue3可以更好地支持TypeScript
二、setup 使用
<template>
<h1>信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="sayHello">speak</button>
</template>
<script>
export default{
name:'App',
// 测试setup,不考虑响应式
setup(){
// 数据
let name='张三'
let age=18
// 方法
function sayHello(){
alert(`${name},${age}`)
}
// 返回一个对象
return{
name,
age,
sayHello
}
}
}
</script>
1、注意点一
尽量不要与vue2.x配置混用,vue2.x配置(data、methods、computed)中可以访问到setup中的属性、方法。但在setup中不能访问到vue2.x配置(data、methods、computed)。如果有重名,setup优先。
2、注意点二
setup不能是一个async函数,因为返回值不再是return对象,而是promise。
三、ref 函数
<template>
<h1>个人信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h3>工作种类:{{job.type}}</h3>
<h3>工资:{{job.salary}}</h3>
<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import{ref}from 'vue'
export default{
name:'App',
setup(){
// 数据
let name=ref('张三')
let age=ref(18)
let job=ref({
type:'工程师',
salary:'30k'
})
// 方法
function changeInfo(){
name.value='李四'
age.value=48,
job.value.salary='10k',
job.value.type='测试'
}
// 返回一个对象
return{
name,
age,
job,
changeInfo
}
}
}
</script>
1、作用
定义一个响应式的数据
2、语法
const xxx=ref(initValue)
创建一个包含响应式数据的引用对象(ref对象)
JS中操作数据:xxx.value
模板中操作数据:不需要.value,直接:{{xxx}}
3、接收的数据
接收的数据可以是基本类型也可以是对象类型。
基本类型的数据:响应式依然是靠object.defineProperty()的get与set完成的。
对象类型的数据:内部使用了vue3中的一个新函数——reactive函数。
四、reactive 函数
<template>
<h1>个人信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h3>工作种类:{{job.type}}</h3>
<h3>工资:{{job.salary}}</h3>
<h3>爱好:{{hobby}}</h3>
<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import{ref,reactive}from 'vue'
export default{
name:'App',
setup(){
// 数据
let name=ref('张三')
let age=ref(18)
let job=reactive({
type:'工程师',
salary:'30k'
})
let hobby=reactive(['看书','音乐','游戏'])
// 方法
function changeInfo(){
name.value='李四'
age.value=48,
job.value.salary='10k',
job.value.type='测试',
hobby[0]='学习'
}
// 返回一个对象
return{
name,
age,
job,
hobby,
changeInfo
}
}
}
</script>
1、作用
定义一个对象类型
的响应式数据(基本数据类型不用,要用ref函数)
2、语法
const 代理对象=reactive(源对象)
,接收一个对象(或数组),返回一个代理对象(proxy对象)
3、实现原理
reactive定义的响应式数据是深层次的,内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作。