Vue3快

Vue3快

一、创建Vue3工程

1.使用vue-cli创建

## 查看@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 serve

2.使用vite创建

## 创建工程
$ yarn create vite <project-name> --template vue
## 进入工程目录
$ cd <project-name>
## 安装依赖
$ yarn
## 运行
$ yarn dev

3.vue挂载变化

// 引入createApp 用于创建Vue实例
import { createApp } from 'vue'
import App from './App.vue'

// vue3创建实例与挂载
createApp(App).mount('#app');


// vue2 创建实列与挂载
new Vue({
    render:h=>h(App)
}).$mount('root')

4.template标签变化

<template>
  <!-- vue3中template标签中，可以没有根标签 -->
  <HelloWorld />
</template>

二、Composition API

1.setup配置

简述：Vue3.0中一个新的配置项，值为一个函数

setup是所有Composition API（组合API）“ 表演的舞台 ”。
组件中所用到的：数据、方法等等，均要配置在setup中。

setup函数的两种返回值：

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

编码：

setup() {
    let m = 1;

    function sayHello(){
      alert(m);
    }

    // 返回一个对象
    return {
      m,
      sayHello
    }

    // 返回一个函数(渲染函数) 渲染函数的返回值，替换本组件的template
    return ()=>h('h1',`尚硅${m}谷`)
  },

注意：

1. 尽量不要与Vue2.x配置混用
   - Vue2.x配置（data、methos、computed...）中<strong style="color:#DD5145">可以访问到</strong>setup中的属性、方法。
   - 但在setup中<strong style="color:#DD5145">不能访问到</strong>Vue2.x配置（data、methos、computed...）。
   - 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.ref函数

定义一个响应式的数据

语法：
const xxx = ref(initValue)

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

备注：

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

编码：

import { ref } from "vue";

setup(){
    let ageRef = ref(18);
}

3.reactive函数

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

编码：

import { reactive } from "vue";

let objRea = reactive({
    type:'前端开发',
    salary:'30k'
});

4.响应原理

vue2.x的响应式

​ 实现原理：

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

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

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

​

​ 存在问题：

​ 新增属性、删除属性, 界面不会更新。($set,$delete)

​ 直接通过下标修改数组, 界面不会自动更新。($set,splice)

Vue3.x的响应式

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

编码：

 let person = {
     name:'jiang',
     age:19
 }

 const personProxy = new Proxy(person, {
     get(...args) {
         console.log('get', args)
         return Reflect.get(...args);
     },
     set(...args) {
         return Reflect.set(...args);
     },
     delete(...args) {
         return Reflect.deleteProperty(...args);
     }
 })

5.reactive与ref

• 从定义数据角度对比：
  • ref用来定义：基本类型数据。
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。

6.setup注意

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

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

子组件中：
	emits:['hello'],    // vue3 中新有的，不写也行

7.计算属性与监视

a.计算属性computed

import { computed } from "vue";
setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 计算属性-简写，只读
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName;
    // });
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });

    return {
      person,
    };
  }

b.监视watch

两个小“坑”：

• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
• 监视reactive定义的响应式数据中某个属性时：deep配置有效。

编码：

setup() {
    let sum = ref(0);
    let msg = ref("hello");

    /* 情况一：监视ref所定义的一个响应式数据*/
    watch(sum, (newValue,oldValue) => {
       console.log('sum变化',newValue,oldValue)
    },{
      immediate:true
    }); 

    /* 监视多个ref所定义的属性*/
    watch([sum, msg], (newValue, oldValue) => {
      console.log('[sum, msg]变化',newValue, oldValue);
    },{
      immediate:true
    }); 

    const personRea = reactive({
      name: "张三",
      age: 19,
      job: {
        salary: 20
      },
    });

    /* 监视reactive所定义的响应式数据的全部属性，
    注意：无法获取oldValue
    注意：强制开启的深度监视(deep配置无效)*/
    watch(personRea, (newValue, oldValue) => {
      console.log("person", newValue, oldValue);
    },{
      deep:false
    }); 

    /*   监视reactive所定义的一个响应式数据的某个属性，需要写成一个函数的返回值*/
    watch(()=>personRea.age,(newValue,oldValue)=>{
      console.log('person',)
    }) 

    /* 监视reactive所定义的一个响应式数据的某几个属性，需要写成数组里多个个函数的返回值*/
    watch([() => personRea.name, () => personRea.age], (newValue, oldValue) => {
      console.log("name,age变化",newValue,oldValue);
    }); 

    /* 特殊情况 监视reactive中属性(对象)*/
    watch(()=>personRea.job,(newValue,oldVale)=>{
      console.log('person.job',newValue,oldVale)
    },{
      deep:true // 该属性是对象，deep有效
    })

c.watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
const name = ref("vue");
const changeName = () => {
  name.value += "-next";
};
const stopWatchEffect = watchEffect((onInvalidate) => {
if (name.value.length > 20) {
  stopWatchEffect();
  // 用于停止watchEffect
}
console.log(name.value);

const timer = setTimeout(() => {
  console.log(" 2 秒后执行timer");
}, 1000);

onInvalidate(() => {
  console.log("onInvalidate"); // 每次执行watchEffect之前都会执行都会执行，清除副作用
  clearTimeout(timer);
});
});

8.生命周期

变化：

beforeDestory		==>		beforeUnmount
destoryed			==>		unmounted	

vue#中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmounted

Vue3.0也提供了 Composition API 形式的生命周期钩子：

import {  onBeforeUnmount, onMounted, ref } from 'vue'
export default {
    name:'Child',
    setup(){
        let sum = ref(0);
        onMounted(()=>{
            console.log('成功挂载');
        })
        onBeforeUnmount(()=>{
            console.log('onBeforeUnmount卸载之前')
        })
        return {sum}
    },
    beforeUnmount(){
        console.log('卸载之前')
    }
}

9.自定义hook函数

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

编码实现自定义hook

src/hooks/usePoint:

import { onBeforeUnmount, onMounted, reactive } from "vue";

export default function() {
  // 鼠标打点数据
  const point = reactive({
    x: 0,
    y: 0,
  });

  // 保存数据
  const bindindPoint = (e) => {
    point.x = e.pageX;
    point.y = e.pageY;
  };

  // 实现鼠标打点的钩子
  onMounted(() => {
    window.addEventListener("click", bindindPoint);
  });
  onBeforeUnmount(() => {
    window.removeEventListener('click', bindindPoint);
  });

  return point;
}

使用自定义hook：

import usePoint from "../hooks/usePoint";

setup() {
    const point = usePoint();
    return { point }
},

10.toRef函数

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)，用于将reactive解构成多个ref对象。

编码：

import { reactive, toRef, toRefs } from "vue";

setup() {
    const person = reactive({
      name: "张三",
      age: 19,
      job: {
        salary: 10,
      },
    });

    // toRef  类似于 给属性添加一个快捷方式 操作的还是源对象属性

    // toRefs  给批量浅层属性添加一个快捷方式， 操作的还是源对象属性
    const x = toRefs(person);  // {name:RefImpl{},age:RefImpl{},job:RefImpl{}}

    return {
      //   name: toRef(person, "name"),
      //   age: toRef(person, "age"),
      salary: toRef(person.job, "salary"),
      person,
      ...x,
    };
  },

11 在setup中获取ref标记的元素

setup中不能同步获取到ref标记的元素

<h2 ref="h2Ref">app page h2</h2>  
<!-- 挂载时，才会将 h2 DOM元素对象 绑定给h2Ref 对象 -->

import { ref } from "vue";
setup() {
  const h2Ref = ref(null);
  // console.log(h2Ref); 还不能获取，需要挂载之后才有值
  /** setTimeout(() => {
  	// 异步查看或者在声明钩子中查看
    console.log(h2Ref.value);
  }, 1000);
  */
watchEffect(
  () => {
    console.log(h2Ref.value);
  },
  {
    flush: "post",
    // 修改执行时机
  }
);

  return {
    h2Ref,
  };
}

三、其它Composition API

1.shallowReactive与shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2.readonly 与 shallowReadonly

• readonly: 让一个响应式数据变为只读的（深只读）。
• shallowReadonly：让一个响应式数据变为只读的（浅只读）。
• 应用场景: 不希望数据被修改时。

3.toRaw 与 markRaw

• toRaw：
  • 作用：将一个由reactive生成的响应式对象转为普通对象。
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
• markRaw：
  • 作用：标记一个对象，使其永远不会再成为响应式对象。
  • 应用场景:
    1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
    2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4.customRef

• 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。
• 实现防抖效果：

import { customRef } from 'vue'

export default function useDebounceRef(value, delay = 300) {
    return customRef((track, trigger) => {
        // track 决定什么是否收集依赖
        // trigger 决定什么时候触发更新
        let timeoutId = null;
        return {
            get() {
                track()
                return value; // 检测这个局部变量的变化
            },
            set(newValue) {
                // 这里使用的节流
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => {
                    value = newValue;
                    trigger();
                }, delay);
            }
        }
    })
}

5.provide 与 inject

• 作用：实现祖与后代组件间通信
• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

编码

// 父组件
const name = ref("vue");
const age = ref(18);

// 形成一个单向数据流
provide("name", readonly(name));
provide("age", readonly(age));

const changeAge = () => {
  age.value++;
};

// 子组件
const name = inject("name");
const age = inject("age");

6.响应式数据的判断

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

四、Composition API的优势

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

Composition API 我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。（分解成多个hook函数）

五、常用的新组件

1.Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

2.Teleport

• 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

编码，创建模态框

<teleport to="body">
    <!-- to可写 css选择器，常写body -->
    <div v-if="isShow" class="mask">   <!-- 模态框 -->
        <div  class="dialog">
            <h3>我是一个弹窗</h3>
            <ul>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </ul>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

<style lang="css" scoped>
   
.mask{
        /* 背景蒙版 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: rgba(0,0,0,.5);  */
    background-color: rgba(221, 221, 221, 0.5);
    z-index: 100;
}
.dialog {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: blue;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

3.Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用import函数导入的包，在打包时，会被webpack进行分包操作

// 通过import 函数导入的模块，返回一个promise
import('./utils/math').then(res => {
    console.log(res.sum(20, 30))
})

使用步骤：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
/**
definAsyncComponent 用于在vue中，给组件进行分包操作
接受两种类型的参数:
类型一：工厂函数，该工厂函数返回一个promise对象
类型二：接受一个对象，用于对异步函数进行配置
*/

const AsyncCategory = defineAsyncComponent({
  loader: () => import("./components/AsyncCategory.vue"),
  loadingComponent: Loading, // 加载中组件
  errorComponent: Loading, // 加载失败组件
  delay: 3000, // 延迟时间 在显示加载组件之前的时间
  onError: function (err, retry,fail, attemps) {
    // 加载失败时的回调
    console.log(err);
    console.log(retry);
    console.log(attemps);
  },
});

使用Suspense包裹组件，并配置好default与 fallback

<Suspense fallback="">
    <template v-slot:default>
        <Child />
    </template>

    <template v-slot:fallback>
        <h3>稍等，加载中。。。</h3>
    </template>
</Suspense>



<!-- 异步引入时，子组件的setup可用async修饰 -->
async setup() {
    let sum = ref(0);
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ sum });
        }, 2000);
    });
    return await p;
},

六、其它

1.全局API

Vue 2.x 有许多全局 API 和配置。

• 例如：注册全局组件、注册全局指令等。

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

注册全局组件

• 将全局的API，即：Vue.xxx调整到应用实例（app）上

• • 2.x 全局 API（Vue）	3.x 实例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

2.其他改变

• data选项应始终被声明为一个函数。

• 过度类名的更改：

Vue2.x写法：

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3.x写法:

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

• 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />
    

    • 子组件中声明自定义事件

      <script>
        export default {
          emits: ['close']
        }
      </script>
      

移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

vue3中的定义指令的生命周期名字改变了

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted：在绑定元素的父组件被挂载前调用。

beforeUpdate：在更新包含组件的 VNode 之前调用。

不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

    <my-component
      v-on:close="handleComponentEvent"
      v-on:click="handleNativeClickEvent"
    />
    

    • 子组件中声明自定义事件

      <script>
        export default {
          emits: ['close']
        }
      </script>
      

移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

vue3中的定义指令的生命周期名字改变了

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。

mounted：在绑定元素的父组件被挂载前调用。

beforeUpdate：在更新包含组件的 VNode 之前调用。

v-bind的合并