Vue3视频学习
(1) 中 引入的不再是Vue构造函数，引入的是一个名为createApp的工厂函数
const app = createApp(App)
(‘#app’)
创建应用实例对象–app,类似于之前Vue2中的vm,但app比vm更’轻’
(2) Vue2响应式 和 Vue3响应式Proxy区别
参考视频讲解: /video/BV1Zy4y1K7SHp=146
几个ES6语法
(1) 数组去重
(2) 合并对象数组
(3) 对象数组排序
(4)
()方法的第一个参数是目标对象，后面的参数都是源对象。
对于目标对象而言,()属于浅拷贝, 如要使用深拷贝可以使用 ((obj))
(5) find, filter 用法
(6) substring, substr, slice
参考: /a/1190000016387899
(7) 实现字符串逆序输出
参考: /xhen/p/
对外暴露属性(defineExpose)
script setup 的组件默认不会对外部暴露任何内部声明的属性。 如果有部分属性要暴露出去，可以使用 defineExpose
script setup
语法糖并不是新增的功能模块，它只是简化了以往的组合API（compositionApi）的必须返回（return）的写法，并且有更好的运行时性能。
注：因为setup语法糖是vue3.2正式确定下来的议案，所以vue3.2的版本是真正适合setup语法糖的版本。
在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了
setup 函数
由于在执行setup函数的时候，还没有执行created生命周期方法，所以在setup函数中，是无法使用data和methods
setup函数只能是同步的不能是异步的
reative
reactive是vue3中提供的实现响应式数据的方法, 通过ES6的proxy来实现的
reative参数必须是对象（json/array）
如果给reactive传递了其他对象, 默认情况下修改对象，界面不会自动更新, 如果想更新，可以通过重新赋值的方式
ref
ref和reactive一样，也是用来实现响应式数据的方法. 实现对简单值的监听
ref底层的本质其实还是reactive，系统会自动根据我们给ref传入的值将它转换成ref(xx) -> reactive({value:xx})
在vue（template）中使用ref的值不用通过value获取
在TS中使用ref的值必须通过value获取
在组合API中使用生命周期函数，直接从vue中引入
import {onMounted} from Vue
vue3响应式数据本质
在中通过defineProperty来实现响应式数据的
在中是通过Proxy来实现响应式数据的
provide 与 inject
作用: 实现祖与后代组件间通信
用法: 父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据.
具体写法:
Vue3中watch函数和watchEffect函数的对比
watch函数的套路是: 既要知名要检视那个属性,也要指明检视的回调.
watchEffect函数的套路是: 不用指明要检视哪个属性,回调中用到了哪个属性,那就检视哪个属性.
watchEffect函数和computed函数有点像:
computed函数注重: 计算出来的值 [PS: 回调函数的返回值], 所以必须写返回值.
watchEffect函数注重: 过程 [回调函数的函数体], 所以不用写返回值.
reactive() 和 ref() 对比
参考: /xiegongzi/p/
Proxy数据检视原理
Vue2中数据检视如果是对象类型的,通过()的getter和setter来做到数据监视的;
Vue2中监视数据的弊端:
新增属性,删除属性,界面不会更新.
直接通过下边修改数据.界面不会更新.
Vue3中就不会出现上面的情况.
Proxy官方链接: /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Reflect官方链接: /zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
相比Vue2
打包大小减少41%
初次渲染快55%,更新渲染快133%
内存减少54%
使用Proxy代替defineProperty实现数据响应式
重写虚拟DOM的实现和Tree-Shaking
创建Vue3项目(通过Vite来创建)
node版本: 14.16.3 npm版本: 6.14.13
npm create vite@latest vue3-demo --template vue
npm install
npm run dev
vue3中ref使用
参考: /weixin_47886687/article/details/112919563
keep-alive