vue3的用法

常乐-

已于 2023-02-22 11:31:29 修改

阅读量401

点赞数 1

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-12-26 23:13:56 首次发布

本文链接：https://blog.csdn.net/m0_70947033/article/details/128450555

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介：认识Vue3和项目搭建

Vue3优点
- 更小的打包体积和内存
- 页面第一次的渲染速度和更新速度更快
- 更好的支持 TypeScript
- 新增了 Composition API 和内置组件
搭建Vue3项目
- vue-cli创建
  - 保持跟课程脚手架版本一致4.5.17，防止引用插件出现兼容问题
```
npm install -g @vue/cli@4.5.17
```
  - 查看版本，不一致时重新安装
```
vue -V //查看版本
```
```
全局卸载重装
```
```
npm uninstall -g vue-cli
```
```
npm install -g @vue/cli@4.5.17
```
  - 创建项目
```
vue create vue_project
```
  - 进入项目目录启动
```
npm run serve
```

1：vite 创建的项目速度快但是默认的配置过于精简

项目工程文件介绍与Devtools安装

项目文件
- 入口文件 main.js
  - 使用 createApp 解析模板，更加小巧
```
import { createApp } from 'vue'
```
```
import App from './App.vue'
```
```
createApp(App).mount('#app')
```
- 组件 <template> 标签里可以插入多个根标签
Devtools 安装
- 正式版的 Devtools 在Vue3项目中不生效

详解常用Composition API

简介：走进Vue3的世界—setup

setup

setup 函数是Vue3新的配置项
是使用组合API的前提，数据、方法都要放到setup 函数里声明

写法

setup() {

  const name = "张三";

  const age = 18;

  function sayHello() {

    alert("你好,我是${name},今年${age}岁了");

  return {

    name,

    age,

    sayHello,

};

},

实现数据的响应式—ref函数

简介：实现数据的响应式—ref函数

定义
- 定义一个响应式的数据

基本类型数据

引入 ref 函数
```
import { ref } from "vue";
```
创建一个包含响应式数据的引用对象（ ref 对象）
```
let name = ref("张三");
```
```
let age = ref(18);
```

操作数据

function changePerson() {

  name.value = "李四";

  age.value = "19";

对象类型数据

创建一个包含响应式数据的引用对象（ ref 对象）
```
let obj = ref({
```
```
  xd: "课堂",
```
```
  course: "vue3",
```
```
});
```

操作数据

function changeCourse() {

  obj.value.course = "react";

注意
- 可以处理基本类型数据、数组或者对象类型的数据
- 基本类型数据的响应式是通过 Object.defineProperty() 实现
- 对象类型数据的响应式是通过 ES6 中的 Proxy 实现

实现数据的响应式—reactive函数

简介：实现数据的响应式—reactive函数

定义
- 定义一个对象类型的响应式数据（不能处理基本类型数据）

写法

对象

// 定义

let obj = reactive({

  xd: "课堂",

  course: "vue3",

});

// 修改

obj.course = "node";

数组

// 定义

let list = reactive(["吃饭", "睡觉", "敲代码"]);

// 修改

list[3] = "打游戏"

reactive 和 ref 不同点
- 处理数据类型不同： ref 可以处理基本类型和对象（数组）类型数据，reactive 只能处理对象（数组）类型数据
- 实现原理不同：ref 处理基本类型数据通过 Object.defineProperty() 实现，reactive 通过 Proxy 实现
- 操作不同：ref 操作数据需要加 .value
组件数据多时更加趋向使用 reactive

剖析setup函数的执行时机和两个参数

简介：详解setup函数的两个参数

执行时机
- 在生命周期函数 beforeCreate 之前执行一次，而且 setup 函数没有 this

两个参数

props

第一个参数接收父组件的值，是一个对象

export default {

  props: ["mess"],   //需要props声明才能在setup收到参数

  setup(props) {

    console.log(props.mess);

},

};

context

上下文对象

触发自定义事件

export default {

  emits: ["xd"], //需要emits声明才能在setup中使用

  setup(props, context) {

    function clickMe() {

      context.emit("xd", "子组件的值");

    return {

      clickMe,

};

},

};

掌握setup中的计算属性—computed函数

简介：详解computed函数

定义
- 通过已有的属性计算而来，跟vue2.x中的功能原理一样，使用方式有区别

使用

计算 ref 定义的响应式数据

const fullName = computed({

  get() {

    return firstName.value + "-" + lastName.value;

},

  set(value) {

    const arr = value.split("-");

    firstName.value = arr[0];

    lastName.value = arr[1];

},

});

计算 setup定义的响应式数据

person.fullName = computed({

  get() {

    return person.firstName + "-" + person.lastName;

},

  set(value) {

    const arr = value.split("-");

    person.firstName = arr[0];

    person.lastName = arr[1];

},

});

掌握setup中的监视属性—watch函数上

简介：详解watch函数

定义
- 监听值的变化，执行相关的操作，跟vue2.x中的配置一样

监听 ref 定义的数据

基本类型

// 监听一个ref定义的数据

watch(num, (newValue, oldValue) => {

  console.log("num增加了", newValue, oldValue);

},{ immediate: true, deep: true });

// 监听多个ref定义的数据

watch([num, num1], (newValue, oldValue) => {

  console.log("num增加了", newValue, oldValue);

});

掌握setup中的监视属性—watch函数下

简介：详解watch函数

监听 reactive 定义的数据

使用

监听对象类型

watch(numObj, (newValue, oldValue) => {

  console.log("numObj变化了", newValue, oldValue);

});

监听对象中的一个基本类型属性

watch(

  () => numObj.a,

  (newValue, oldValue) => {

    console.log("numObj变化了", newValue, oldValue);

);

监听对象中的一些基本类型属性

watch([() => numObj.a, () => numObj.b], (newValue, oldValue) => {

  console.log("numObj变化了", newValue, oldValue);

});

监听对象中的对象类型属性

watch(

  numObj.c,

  (newValue, oldValue) => {

    console.log("numObj.c变化了", newValue, oldValue);

);

总结
- 实现监听生效
  - ref 定义的数据
    - 基本类型数据作为监听值
    - 对象作为监听值，需要加 .value（用的少）
  - reactive 定义的数据
    - 对象作为监听值
    - 属性作为监听值，需要放在回调函数中

认识setup中的watchEffect函数

简介：详解watchEffect函数

定义
- 在监听的回调函数中使用了属性，则监听该属性，不用在参数上指明监听哪个属性

写法

watchEffect(() => {

  let xd = numa.value;

  let xd1 = numb.value;

  console.log("watchEffect函数执行了");

});

与 watch 的区别
- 属性监听区别：
  - watch 手动添加定向的监听属性
  - watchEffect 自动监听使用到的属性
- 初始化执行：
  - watchEffect 会初始化执行一次
建议开发中使用 watch 监听，逻辑简单、依赖属性少的场景可以使用 watchEffect

掌握生命周期函数和数据处理

掌握Vue3中的生命周期函数

简介：详解Vue3中的生命周期函数

创建

创建前、后：beforeCreate、created

创建：setup

挂载

挂载前、后：beforeMount、mounted

挂载：onBeforeMount、onMounted

更新

更新前、后（beforeUpdate、updated）

更新：onBeforeUpdate、onUpdated

卸载

销毁前、后：beforeDestroy、destroyed

卸载：onBeforeUnmount、onUnmounted

掌握Vue3中的toRef和toRefs函数

简介：详解Vue3中的toRef和toRefs

toRef
- 定义
  - 创建一个 ref 对象，其 value 值指向另一个对象中指定的属性
- 写法
```
const name = toRef(person, "name");
```
- 作用
  - 将某个响应式对象的某一个属性提供给外部使用
toRefs
- 定义
  - 批量创建多个 ref 对象，其 value 值指向另一个对象中指定的属性
- 写法
```
setup() {
```
```
  let person = reactive({
```
```
    name: "张三",
```
```
    age: 19,
```
```
  });
```
```
  return {
```
```
    ...toRefs(person),
```
```
  };
```
```
},
```
- 作用
  - 将某个响应式对象的全部属性提供给外部使用