目录
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)。耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
github上的tags地址: https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么
1.性能的提升
2源码的升级
3.拥抱TypeScript
. Vue3可以更好的支持TypeScript
4.新的特性
1.Composition API(组合API)
2.新的内置组件
3.其他改变
1.理解: Vue3.0中一个新的配置项,值为一个函数。
2.setup是所有Composition API(组合API)“表演的舞台”。
3.组件中所用到的:数据、方法等等,均要配置在setup中。
4.setup函数的两种返回值:
5.注意点:
备注:
实现原理:
0bject.defineProperty(data,'count ', {
get() ,
set()})
- //模拟Vue2中实现响应式
- let p={
- 0bject.defineProperty(p, 'name ' ,
- iconfigurable:true,
- get(){//有人读取name时调用
- return person.name
- },
- set(value){//有人修改name时调用
- console.log('有人修改了name属性,我发现了,我要去更新界面!')
- person.name = value
- }
- })
- object.defineProperty(p,'age',{get(){//有人读取age时调用
- return person.age
- },
- set(value){//有人修改age时调用
- console.log('有人修改手age属性,我发现了,我要去更新界面!')
- person.age = value
- })*/
存在问题:
实现原理:
- new Proxy(data,{
- //拦截读取属性值
- get (target,prop) {
- return Reflect.get(target,prop)},
- //拦截设置属性值或添加新属性
- set (target, prop, value){
- return Reflect.set(target,prop, value)},
- //拦截册除属性
- deleteProperty (target, prop) {
- return Reflect.deleteProperty(target,prop)
- }
- })
- proxy .name = 'tom '
- //模拟vue3中实现响应式
- const p = new Proxy(person,{
- //有人读取p的某个属性时调用
- get(target,propName){
- console.log(`有人读取了p身上的${propName}属性`)
- return Reflect.get(target,propName)
- },
-
- //有人修改p的某个属性、或给p追加某个属性时调用*
- set(target,propName,value){
- console.log(`有人修改了p身上的${ propName}属性,我要去更新界面了!`)
- Reflect.set(target,propName,value)
- },
- //有人删除p的某个属性时调用
- deleteProperty(target,propName){
- console.log(`有人删除了p身上的${propName}属性,我要去更新界面了!`)
- return Reflect.deleteProperty(target,propName)
- }
- import {computed} from 'vue'
- setup(){
- //计算属性—简写
- let fullName = computed(()=>{
- return person.firstName + '-'+ person.lastName})
- //计算属性--完整
- let fullName = computed({
- get(){
- return person.firstName + '-'+ person. lastName},
- set(value){
- const nameArr = value.split('-')
- person.firstName = nameArr[0]
- person.lastName = nameArr[1]
- }
- })
- }
- //情况一:监视ref定义的响应式数据
- watch(sum,(newValue,oldValue)=>{
- console.log( 'sum变化了' , newValue,oldValue)
- },{immediate:true})
-
- //情况二:监视多个ref定义的响应式数据
- watch( [sum,msg] ,(newvalue,oldValue)=>{
- console.log( ' sum或msg变化了' , newValue,oldValue)
- })
- /*情况三:监视reactive定义的响应式数据
- 若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue! !
- 若watch监视的是reactive定义的响应式数据,则强制开启了深度监视*/
-
- watch(person , (newValue,oldValue)=>{
- console.log( 'person变化了' , newValue,oldValue)
- },{immediate:true,deep:false})//此处的deep配置不再奏效
- //情况四:监视reactive定义的响应式数据中的某个属性
- watch(()=>person.job,(newValue,oldvalue)=>{
- console.log( 'person的job变化了' ,newValue,oldValue)
- },{immediate:true,deep:true})
-
- //情况五:监视reactive所定义的一个响应式数据中的某些属性
- watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{console.log( ' person的name或age变化了' , newValue,oldValue)
- )
- //特殊情况
- watch(()=>person.job, (newValue,oldValue)=>{
- console.log( ' person的job变化了' ,newValue,oldValue)
- },{deep:true})//此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置
- 有效
- //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
- watchEffect(()=>{
- const x1 = sum.value
- const x2 = person.age
- console.log( 'watchEffect配置的回调执行了')})