Vue3入门级别笔记-适用于入门

前言：Vue3快速上手
1.Vue3简介

• 2020年9月18日，发布Vue.js3.0版本，代号：One Plece（海贼王）

2.Vue3带来了什么

性能升级

• 打包大小减少41%，
• 初次渲染快55%，更新渲染快133%
• 内存减少45% …

源码升级

• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

• Vue3可以更好的支持TypeScript

新的特性

• Composition API（组合API）：setup配置、ref与reactive、watch与watchEffect、provide与inject…
• 新的内置组件：Fragment、Teleport、Suspense
• 其它改变：新的生命周期钩子、data选项应始终被声明为一个函数、溢出keyCode支持作为v-on的修饰符…

一、创建Vue3.0工程（两种方式）
1.使用vue-cli创建，要求vue-cli版本高于4.5.0
官方文档：
2.使用vite创建（没用webpack，现在不常用）
vite官网：https://vitejs.cn/
什么是vite? ——新一代前端构建工具（原有的是webpack）
优势：开发环境中，无需打包操作，可快速的冷启动、轻量快速的热承载、真正的按需编译（不多做了解）
ps：优化的启动速度与工程修改之后渲染速度

分析工程结构
src——main.js文件

/引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数,vue2中没有/
import {
    
     createApp } from './vue'
import App from './App.vue'

// 创建应用实例对象app——类似vue2中的vm，但app更轻
const app = createApp(App)
app.mount('#app')  // 挂载

/* vue2写法
const vm = new Vue({
  render:h => h(App)
})
vm.$mount('#app')
*/

src——App.vue

<script>
import HelloWorld from './components/HelloWorld.vue

export default {
      
      }
</script>

二、常用Composition API（组合式API）

1.拉开序幕的setup（初识setup）
1.理解：Vue.3中一个新的配置项，职位一个函数。
2.setup是所有Composition API（组合API）“表演舞台”
3.组件中所有用到的：数据、方法等，均要配置在setup中
4.setup函数的两种返回值：①若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点）②若返回一个渲染函数：则可以自定义渲染内容。
5.注意点：尽量不要与Vue2.x配置混用（Vue2.x配置中可以访问到setup中的属性、方法；但是setup中不能访问到Vue2.x配置；如果有重名setup优先）；setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return中的属性

2.ref函数（引用实现对象）
_处理基本函数类型，用ref声明之后变量成为【RefImpl】的实例对象

<template>
  <h1>{
   
   {name - age}}</h1>
</template>

<script>
import {
      
       ref } from 'vue'

export default {
      
      
  name: 'App',
  setup() {
      
      
    / 里面其实兼容vue2的方法，但是不推荐，会有问题例如vue2可以读取3中的数据与方法，但是3中不能读取2的 /
    let name = ref('张三')
    let age = ref(18)

    function changInfo(
      console.log(name, age) //控制台输出的是一个对象RefImpl{}, 即引用对象 （RefImpl引用实现缩写）
      // 所以修改数据的时候需要取.value，即name.value/age.value
    ) // 方法
    return {
      
       name, age, changInfo } // 返回一个对象（常用）
  }
}
</script>

_处理基本对象类型

<template>
  <h1>{
   
   {name - age}}</h1>
  <p>job </p>
</template>

<script>
import {
      
       ref } from 'vue'

export default {
      
      
  name: 'App',
  setup() {
      
      
    // 数据
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      
      
      type: 'web前端',
      salary: '30k'
    })

    function changInfo(
      console.log(job) //控制台输出的是一个Proxy{}代理对象, Vue3对不同数据类型不同处理方式
      //处理job时，应该用job.value.type/job.value.salary
    ) // 方法
    return {
      
       name, age, changInfo } // 返回一个对象（常用）
  }
}
</script>

总结
ref函数作用：定义一个响应式数据
语法：const xxx = ref(initValue)创建一个包含响应式数据的引用对象（reference对象）；JS中操作数据：‘xxx.value’；模板中读取数据不需要.value，直接<div>{ {xxx}}</div>

3.reactive函数

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

4.Vue3.0中的响应式原理
要想实现数据的响应式，必须捕获到数据的修改

• 回顾vue2.x的响应式
  实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
  数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）

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

存在问题：①新增属性、删除属性，界面不会更新；②直接通过下标修改数组，界面不会自动更新

// vue2.0添加属性有两种方式
this.$set('对象', '添加的属性', '属性值')
Vue.set('对象', '添加的属性', '属性值')

// vue2.0删除属性
this.$delete('对象', '添加的属性', '属性值')
Vue.delete('对象', '添加的属性', '属性值')

• Vue3.0的响应式
  实现原理：通过Proxy（代理）：拦截对象中任意属性的变化，包括属性值的读写，属性的添加，属性的删除等，通过Reflect（反射）对源代理对象的属性进行操作。
  MDN文档中描述的Proxy与Reflect

// 源数据
let person = {
    
    
  name: '张三',
  age: 18
}
// 模拟Vue3中时间响应式， Proxy代理
const p = new Proxy(person, {
    
    
  get(target, propName) {
    
    
    console.log('要想实现数据的响应式，必须捕获到数据的修改,有人读取时调用')
    // 没有写return返回undefined
    // return XXX
    return target[propName]
  },
  set(target, propName, value) {
    
    
    console.log('要想实现数据的响应式，必须捕获到数据的修改,有人新增与修改时调用')
    // 没有写return返回undefined
    return target[propName] = value
  },
  deleteProperty(target, propName) {
    
     // 有人新增与修改时调用
    return delete target[propName]
  }
})
// p.name调用get(), p.name = 'XX'调用set(){}

上面操作直接修改的是person源数据，但是vue3底层并不单单是这样写的，下面就引出了reflect

• reflect
  反射，可以看做替代Object，比Object更高级，说的不准确可以这样记，
  那你肯定要问为什么不直接用Object呢？原因之一是因为Object重复定义重名的时候会报错，reflect不会报错，会直接不执行

//所以结合上面，我们总结vue3中大概的思路如下代码
let person = {
    
    
  name: '张三',
  age: 18
}

const p = new Proxy(person, {
    
    
  get(target, propName) {
    
    
    return Reflect.get(target, propName)
  },
  set(target, propName, value) {
    
    
    return Reflect.set(target, propName, value)
  },
  deleteProperty(target, propName) {
    
    
    return Reflect.deleteProperty(target, propName)
  }
})

5.reactive对比ref

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

6.setUp注意点

• setUp执行的时机
  在beforeCreate之前执行一次，this是undefined。

• setUp的参数
  props：值为对象，包含：组件外部传递过来，且主组件内部声明接收了的属性
  context：上下文对象

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

setUp(props, context) {
    
    
}