vue3基础知识

文章目录

• vue3优点

• 1. 创建项目

• • 1.1 使用vue-cli
  • 1.2 使用vite创建

• 2. 常用组合式 API

• • 2.1 Setup
  • 2.2 ref函数
  • 2.3 reactive函数
  • 2.4 Vue3.0的响应式
  • 2.5 reactive对比ref
  • 2.6 setup注意的点
  • 2.7 计算属性
  • 2.8 watch
  • 2.9 watchEffect 函数
  • 3.0 vue3的生命周期
  • 3.1 自定义hook函数
  • 3.2 toRef
  • 响应式数据判断
  • vue3细节
  • • 6.1 全局api的转移
    • 6.2 其他改变

vue3优点

1. 性能提升（更快更少）

2. 源码升级

   • 使用proxy代替difineproperty
   • 重写虚拟dom和tree -shaking

3. 有typescript

4. 新特性

1. 创建项目

1.1 使用vue-cli

    vue create xxx 
    
    <!--选择vue3模板-->

1.2 使用vite创建

什么是vite

新一代前端构建工具

优势：

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载(HMR)。
• 真正的按需编译，不再等待整个应用编译完成。

    //安装vite 
    npm init @vitejs/app
    //创建工程
    npm init vite-app <project-name>
    
    npm init @vitejs/app my-vue-app -- --template vue
    
    //进入工程目录
    cd <project-name>
    //安装依赖
    npm install
    //运行
    npm run dev

发现bug 说少东西 使用如下指令

    node ./node_modules/esbuild/install.js

2. 常用组合式 API

2.1 Setup

1. 理解： 3.0的新配置项，值是一个函数

2. setup是组合式api 表演的舞台

3. 数据方法都配置在setup中。

4. setup函数 两种返回值
   1. 若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
   2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)

5. 注意点:
   1. 尽量不要与Vue2.x配置混用
   2. Vue2.x配置(data、methos、computed…）)中可以访问到setup中的属性、方法。
   3. 但在setup中不能访问到Vue2.x配置(data、methos、computed…)。
   4. 如果有重名, setup优先。
   5. setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

2.2 ref函数

• 作用:定义—仓响应式的数据
• 语法: const xxx = ref(initvalue)
  • 创建一个包含响应式数据的引用对象(reference对象)
  • JS中操作数据:xxx.value
  • 模板中读取数据:不需要.value，直接:

{{xxx}}

• 备注:
  • 接收的数据可以是:基本类型、也可以是对象类型。
  • 基本类型的数据:响应式依然是靠 object.defineProperty()的get与set完成的
  • 对象类型的数据:内部“求助”了Vue3.0中的一个新函数——reactive函数。

2.3 reactive函数

• 作用:定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数)
• 语法: const 代理对象 reactive(源对象）接收一个对象（或数组)，返回一个代理对象（proxy对象)
• reactive定义的响应式数据是“深层次的"。
• 内部基于ES6的 Proxy实现，通过代理对象操作源对象内部数据进行操作。

2.4 Vue3.0的响应式

• 实现原理:
  • 通过Proxy(代理)︰拦截对象中任意属性的变化,包括:属性值的读写、属性的添加、属性的删除等
  • 通过Reflect(反射):对源对象的属性进行操作。

2.5 reactive对比ref

从定义数据角度对比:

* ref用来定义:**基本类型数抿** * reactive用来定义:**对象（或数组)类型数据** 。
* 备注: ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

从原理角度对比:

* ref通过 object.defineProperty()的get与set来实现响应式(数据劫持)。
* reactive通过使用Proxy来实现响应式(数据劫持)﹐并通过Reflect操作源对象内部的数据。

从使用角度对比:

* ref定义的数据:操作数据需要.value，读取数据时模板中直接读取不需要.value 。
* reactive定义的数据:操作数据与读取数据:均不需要.value。

2.6 setup注意的点

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined

• setup的参数

  • props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
  • context: 上下文对象
    • attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于this .$attrs 。
    • slots:收到的插槽内容,相当于this.$slots )。
    • emit:分发自定义事件的函数,相当于this.$emit 。

2.7 计算属性

与vue2 一样

写法

    import { reactive, ref ,computed} from "vue"
    
     person.fullName= computed({
       get(){
     return person.firstName+'-'+ person.lastName
       },
       set(value){
     const nameArr = value.split('-')
     person.firstName = nameArr[0]
     person.lastName = nameArr[1]
       }
    
     })

2.8 watch

• 配置和2.x一样
• 监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效)。

                          监视reactive定义的响应式数据中某个属性时: deep配置有效。

2.9 watchEffect 函数

• watch的套路是:既要指明监视的属性，也要指明监视的回调。
• watchEffect的套路是:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
  • watchEffect有点像computed :但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值
  • 而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值。

3.0 vue3的生命周期

• app = vue.createApp（option） app.mount（el）
• beforeCreate ： 初始化事件＆生命周期
• created ：初始化注入&响应性
• 是否有template
• beforemount ：挂载
• mounted：挂载完毕
• beforeupdate ：虚拟dom重新渲染和更新
• updated
• beforeDestroy
• unmounted

3.1 自定义hook函数

• 什么是hook？-----本质是一个函数，把setup函数中使用Composition API进行封装
• 类似于Vue2.x中的mixin。
• 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

3.2 toRef

• 作用：创建一个ref对象，其value值指向另一个对象中的某个属性值。
• 语法： comst name = toRef(person,‘name’)
• 应用：要将响应式对象中的某个属性单独提供给外部使用时，
• 扩展：toRefs与toRef功能一直，但可以批量创建多个ref对象，语法：toRef(person)

响应式数据判断

vue3细节

6.1 全局api的转移

6.2 其他改变

• data始终是一个函数
• 过度的写法改了

    <!--原来-->
    .v-enter,
    .v-leave-to {}
    
    .v-leave,
    .v-enter-to {}

    <!--现在-->
    .v-enter-from,
    .v-leave-to{}
    
    .v-leave-from,
    .v-enter-to {}

• 移除按键编码