vue3学习笔记(ref, reactive, setup, hook...)

目录

一、搭建项目

二、常用的Composition API

1.ref函数(实现响应式)

2.reactive函数

3.vue2和vue3响应式的区别

4. setup参数

5.计算属性和监视

6.vue3生命周期

7.自定义hook

8.toRef和toRefs

9.其他组合式api

10.新的组件


一、搭建项目

npm init vite-app

进入项目

npm i

npm run dev

二、常用的Composition API

1.ref函数(实现响应式)

·接受的数据可以是基本数据,也可以是对象类型

·基本数据类型靠Object.defineProperty()的get和set实现

·对象类型的数据内部求助了Vue3中的一个新函数——reactive函数

2.reactive函数

·作用:定义一个对象类型的响应式数据

·返回一个代理对象(proxy的实例对象)

·reactive定义的响应式数据是深层次的

·ref和reactive的区别:

从定义数据角度对比

ref:定义基本类型数据

reactive:定义对象或数组类型

从原理角度对比:

ref使用Object.defineProperty()的get和set实现响应式(数据劫持)

reactive使用proxy来实现数据劫持,并通过Relect操作源对象内部的数据

3.vue2和vue3响应式的区别

·vue2的响应式:

对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)

数组类型:通过重写更新数组的一系列方法来实现拦截。(对数据的变更方法进行包裹)

·存在问题:

新增属性、删除属性,界面不会更新

解决方法:

新增:this.$set(object,property,value)/Vue.set(object,property,value)

删除:this.$delete(object,property)/Vue.delete(object,property)

·vue3的响应式:

通过proxy代理:拦截对象中任意属性的变化,包括:属性值的读写,添加,删除等


   //vue3响应式
        const p=new Proxy(person,{
            //有人读取p的某个属性时调用
            get(target,propName){
                return Reflect.target[propName]
            },
            //有人修改p的某个属性或者增加某个属性时使用
            set(target,propName,value){
                Reflect.set(target,propName,value)
            },
            deleteProperty(target,propName){
                return Reflect.deleteProperty(target,propName)
            }
        })

通过reflect反射(有Object的一些功能属性):对原对象的属性进行操作

Reflect.set(ocj,'a',11)

Reflect.deleteProperty(obj,'a')

Reflect.get(obj,'a')

Object不捕获错误,单线程出现错误会报错

4. setup参数

setup有两个参数,props,context

props是传递给该组件的数据,context是执行上下文

context.attrs表示的是没有接收的props值,相当于vue2的$attrs

context.emit表示分发自定义事件的函数,相当于this.$emits

context.slots:表示收到的插槽内容,相当于this.$slots

你可能感兴趣的:(学习,vue.js,1024程序员节)