Vue3+TS+Vite+Pinia学习总结

VUE3介绍

Vue3+TS+Vite+Pinia学习总结_第1张图片

vue2和vue3之间的区别

  1. 因为需要遍历data对象上所有属性,所以如果data对象属性结构嵌套很深,就会存在性能问题。
  2. 因为需要遍历属性,所有需要提前知道对象上有哪些属性,才能将其转化为getter和setter,所以vue2中无法将data新增的属性转为响应式,只能通过vue提供的vue.set或者this.$set向data中嵌套的对象新增响应式属性,而这种方式并不能添加根级别的响应式属性。
  3. 不能通过下表或者length属性响应式地改变数组,而是必须用数组的方法push,pop,shift,unshift,splice来响应式的改变数组。
  4. 在vue3中使用proxy这个特性,替换了Object.defineProperty重构响应式系统,使用Proxy优势,直接可以监听数组类型的变化,监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升,可以拦截apply,ownKeys,has等13种方法,而Object.defineProperty不行。直接实现对象属性的新增删除。

Vue3新特性

向下兼容

vue3支持大多数vue2的特性,vue2添加Object数据需this.$set或Vue.set,删除需要Vue.delete或者可能得使用其他得一些办法来解决这个问题。vue3添加Obect数据删除都是响应式。

Composition Api

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. 返回一个渲染函数,子当以渲染内容代替模板

Ref和Reactive都是用来创建响应式对象的

ref
  1. ref使用的时候需要.value。
  2. 生命基本数据类型时使用Object.definePropety的原型对象中的get set方法来修改数据实现响应式。
  3. 声明Object类型时内部通过reactive来转为代理对象。
  4. template模板中不需要.value。
reactive
  1. 用来定义Object类型数据。
  2. 操作数据与读取数据都不需要.value。
  3. 通过使用proxy来实现响应式,并通过reflect操作元素对象内部的数据。

生命周期钩子

setup执行时机在beforeCreate之前执行,将beforeDestroy改名为beforeUnmount,destroyed改名为unmounted

钩子 说明
setup() 开始创建组件之前,在beforeCreate之前执行,创建的是data,method。
onBeforeMount() 组件挂载到节点上之前执行的函数
onMounted() 组件挂载完成后执行的函数
onBeforeUpdate() 组件更新之前执行的函数。
onUpdated() 组件更新完成之后执行的函数
onBeforeUnmount() 组件卸载之前执行的函数。
onUnmounted() 组件卸载完成后执行的函数。
onActivated() 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。
onDeactivated() 若组件实例是 缓存树的一部分,比如从 A 组件,切换到 B 组件,A 组件消失时执行。
onErrorCaptured() 在捕获了后代组件传递的错误时调用。

watch

watch可以接收三个参数,第一个是要监听的对象,第二个是数据处理变化,第三个是配置项(options),其中options:immediate:true刚一进去就监听一次。

六、setup语法糖

你可能感兴趣的:(JavaScript,Vue,学习,前端,vue3.js,ts,选项式API,组合式API,vue.js)