Vue3.0

Vue3.0

动机与目的

更好的逻辑复用 与 代码组织 (composition组合式api)
optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
更好的类型推导 (typescript支持)
**vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )**

vue3.0优点

性能方面

• 打包大小减少
• 初次渲染快 , 更新渲染快
• 内存减少

源码方面

• 移除一些冷门 API，比如 filter、inline-template 等，体积减少
• 引入 tree-shaking 减少打包体积（通过编译阶段的静态分析，找到没有引入的模块并打上标记，并且移除）
• 使用 Proxy 代替 defineProperty 实现响应式。
• Vue3 可以更好的支持 TypeScript
• Composition API（组合 API）可以按需使用，多余勾子配置不用再次打包

Vue3.0响应式原理

vue2.x 通过 Object.defineProperty()实现的响应式原理存在以下问题

• 新增属性、删除属性, 监听不到变化从而不是响应式数据，页面也不会改变
• 直接通过下标修改数组也监听不到。 对此 vue3.0 解决了这些问题

proxy 简介(3.x)

vue 响应式原理本质就是 ES6 新语法 proxy 实现的。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截 因此提供了一种机制，可以对外界的访问进行过滤和改写. 接收两个参数，var proxy = new Proxy(target, handler); **target** 参数表示所要拦截的 目标对象，**handler** 参数也是一个对象，用来定制拦截行为。

// 源对象
let obj = {
  name: 'haha',
  age: 18,
}
// handler作为拦截配置对象
const p = new Proxy(obj, {
  // 读取操作
  get(target, propName) {
    // get方法接收2个参数 target指源对象，就是obj,propName就是你当前操作的属性
    // 返回当前读取的值
    return target[propName]
  },
  // 修改操作,新增属性操作时都会触发
  set(target, propName, value) {
    // set方法接收3个参数 target指源对象，前面2个与上相同，第三个参数是修改的值
    // 通知原对象修改数据
    target[propName] = value
  },
  //删除操作
  deleteProperty(target, propName) {
    return delete target[propName]
  },
})
// 以上 即可实现对象的增删改查的监听，实现数据的相应式复制

Reflect 简介

Reflect 对象与 Proxy 对象一样，也是 ES6 为了操作对象而提供的新 API。具有反射的意思。 将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上可以拿到语言内部的方法。
修改某些 Object 方法的返回结果，让其变得更合理，会有一个布尔返回值，易于捕捉错误（js 单线程，报错会阻塞进程）

/ 老写法
try {
  Object.defineProperty(target, property, attributes)
  // success
} catch (e) {
  // failure
}
 
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}
let obj = {
  name: 'haha',
  age: 18,
}
// 三个静态方法：
Reflect.get(obj, 'name') // 返回 haha 读取对象的某个属性的值
Reflect.set(obj, 'name', '小明') //  返回布尔 修改某个属性的值
Reflect.deleteProperty(obj, 'name') //  返回布尔 删除某个属性
 
const p = new Proxy(obj, {
  //有人读取p的某个属性时调用
  get(target, propName) {
    return Reflect.get(target, propName)
  },
  //有人修改p的某个属性、或给p追加某个属性时调用
  set(target, propName, value) {
    Reflect.set(target, propName, value)
  },
  //有人删除p的某个属性时调用
  deleteProperty(target, propName) {
    return Reflect.deleteProperty(target, propName)
  },
})复制

生命周期介绍

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有2个钩子发生了改变 - beforeDestroy改名为beforeUnmount（卸载前） - destroyed改名为unmounted（卸载） 与vue2不同的是，vue3中是有了el模板之后才会去初始化，而vue2中是先created之后再去找模板
分为2种形式的生命周期勾子

组合式 api(Composition API)

setup

它是 vue3 中一个新的配置项，值为一个函数。所有的组合 api 都要在它里面使用

使用介绍

1. 使用变量 或者事件 需要把名字 return 出去即可在模板中使用。

export default {
  setup() {
    let name = 'zhang'
    function at() {
      console.log(1)
    }
    return {
      name,
      at,
    }
  },
}复制

1. setup 函数的两种返回值，一种就是上面常规返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用，还有一种就是返回一个函数

// 若返回一个渲染函数：则可以自定义渲染内容
import { h } from 'vue'
export default {
  setup() {
    return () => h('h1', '你好')
  },
}复制

注意事项：

1. 注意 vue3 虽然可以向下兼容 vue2，但是尽量不能混合使用
2. Vue2.x 配置（data、methos、computed...）中可以访问到 setup 中的属性、方法
3. 由于 setup 中没有 this,所以 setup 中没办法读取 Vue2.x 配置中的数据和方法
4. 如果有重名, setup 优先
5. setup 执行的时机是最早的，在 beforeCreate 之前执行，所以此时 this 是 undefined
6. 参数问题 setup 接收 2 个参数

props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
 
context：上下文对象
- attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 ```this.$attrs```。
- slots: 收到的插槽内容, 相当于 ```this.$slots```。
- emit: 分发自定义事件的函数, 相当于 ```this.$emit```
// 在子组件中
export default {
  props: ['msg', 'school'],
  emits: ['hello'],
  setup(props, context) {
    // props接收props配置项中的相应式数据{msg:'',school:''}
    // context相当于上下文对象，里面有三个值attrs，slots，emit
    //方法
    function test() {
      // 调用父组件方法
      context.emit('hello', 666)
    }
    return {
      test,
    }
  },
}复制

ref 函数

作用: 定义一个响应式的数据（主要针对基础类型数据） 方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：`<div>{{xxx}}</div>

处理基本数据类型

RefImpl 对象中.value 是基础类型时，用的是 Object.defineProperty 通过 get 和 set 实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let name = ref('张三')
    function change() {
      console.log(name, 'name')
      //ref加工之后生成一个 RefImpl引用对象，该对象的原型对象上可以发现，底层其实还是Object.defineProperty通过
      // get 和set实现的响应式数据
      // 因此改变基本数据需要用到RefImpl引用对象中的value属性
      name.value = '小明'
    }
    return {
      name,
      change,
    }
  },
}复制

处理对象类型

RefImpl 对象中.value 是对象类型，用的是 proxy 代理对象实现的响应式数据

import { ref } from 'vue'
export default {
  setup() {
    let obj = ref({
      name: '小明',
      age: 20,
    })
    function change() {
      obj.value.name = '小工'
      obj.value.age++
      console.log(obj.value)
      //可以发现是一个Proxy 对象,其本质其实调用的是```reactive```函数实现Proxy代理响应式对象
    }
    return {
      obj,
      change,
    }
  },
}复制

reactive 函数

作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数） 方法：const x= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象） 特点：可以实现数组、深层对象的响应式数据，这是 vue2.0 中无法实现的，底层基于 Proxy

export default {
  setup() {
    let obj = reactive({
      name: '小明',
      age: 20,
    })
    function change() {
      console.log(obj, 'obj')
      //可以发现obj此时就是一个Proxy的实例对象可以直接修改对象内部属性
      obj.name = '小三'
      obj.age++
    }
    return {
      obj,
      change,
    }
  },
}
 复制

总结 ref 和 reactive

从定义数据角度对比

• ref 用来定义：基本类型数据。ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象
• reactive 用来定义：对象（或数组）类型数据。

从原理角度对比

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