vue3的学习_介绍他

掘金仙桃儿
407 阅读4分钟

vue3带来了什么？

  • 性能的提升
    • 打包大小减少41%
    • 初渲染快55%，更新渲染133%
    • 内存减少54%
  • 源码的提升
    • 使用proxy代替defineProperty实现响应式
    • 重写虚拟DOM的实现和Tree-Shaking
  • 拥抱TypeScript
    • vue3可以更好的支持typescript
  • 新的特性
    • 1.composition API (组合API)
      • setup配置
      • ref 和 reactive
      • watch 与 watchEffect
      • provide 与 inject
    • 2.新的内置组件
      • Fragment
      • Teleport
      • Suspense
    • 3.其他改变
      • 新的生命周期钩子
      • data选项应始终被声明为一个函数
      • 移除keyCode支持作为v-on的修饰符

创建vue3工程

方法一：使用vue-cli创建

#查看vue-cli版本确保都在4.5.0以上
vue --version
#安装或升级你的@vue-cli
npm install -g @vue/cli
#创建
vue create vue_test
#启动
cd vue_test
npm run server

成功 截屏2022-05-15 下午11.11.35.png

方法二：使用vite创建

#创建项目
npm init vite-app <project-name>
#进入工程目录
cd <project-name>
#安装依赖
npm install
#运行
npm run dev

Main.js的不同

// 引入的不再是vue构造函数了，引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象——app(类似于之前Vue2中的vm,但app比vm更轻)
// createApp(App).mount('#app')

const app = createApp(App);
console.log('@@@',app);
app.mount('#app');

截屏2022-05-16 上午10.39.07.png

关闭语法检查

截屏2022-05-16 上午10.41.00.png

vue3组件模板结构可以没有根标签

截屏2022-05-16 上午10.58.42.png

Vue3-dev-tools插件安装

1.拉开序幕的setup

  1. 理解：Vue3.0中一个新的配置项，值为一个函数。

  2. setup是所有Composition API（组合API） “ 表演的舞台 ” 。

  3. 组件中所用到的：数据、方法等等，均要配置在setup中。

  4. setup函数的两种返回值：

    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

  5. 注意点：

    1. 尽量不要与Vue2.x配置混用

      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
      • 如果有重名, setup优先。

    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

    截屏2022-05-16 下午2.40.02.png

2.响应式数据

截屏2022-05-16 下午3.13.17.png

RefImpl -reference 引用 implement实现

截屏2022-05-16 下午3.12.55.png

ref加工生成的是一个引用实现的实例对象=》引用对象

流程1：

截屏2022-05-16 下午3.21.54.png

流程2：

截屏2022-05-16 下午3.23.11.png

流程3：

截屏2022-05-16 下午3.22.47.png

引用对象在引用数数值和对象时的结构分析

991652686828_.pic_副本.jpg

2.1 ref函数

  • 作用: 定义一个响应式的数据

  • 语法: const xxx = ref(initValue)

    • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象） 。
    • JS中操作数据： xxx.value
    • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

  • 备注：

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

2.2 reactive函数

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

4.Vue3.0中的响应式原理

vue2.x的响应式

  • 实现原理：

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

    • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

    Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

  • 存在问题：

    • 新增属性、删除属性, 界面不会更新。
    • 直接通过下标修改数组, 界面不会自动更新。

  • 解决方法(添加属性）

    • this.$set(obj,key,value);
    • import Vue from 'vue' / Vue.set(obj,key,value)

  • 解决方法（删除属性）

    • this.$delete(obj,key)
    • import Vue from 'vue' / Vue.delete(obj,key,value)

  • 解决方法（修改数组）

    • this.$set(Arr,index,value)

    • this.Arr.splice(index,num)

Vue3.0的响应式

  • 实现原理:

    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中实现响应式使用reflect操作源对象内部的数据

    // 模拟vue3中实现响应式
const p = new Proxy(person,{
get(target,propName){
  // 有人读取p的某个属性时调用
  return Reflect.get(target,propName)
},
set(target,propName,value){
  // 有人改变p的属性时调用
  return Reflect.set(target,propName,value);
},
deleteProperty(target,propName){
  //有人删除p的某个属性时调用
  return Reflect.deleteProperty(target,propName)
}
})
avatar
文章
阅读
粉丝