Vue3-01

NIEandyou
448 阅读4分钟

1- Vue3组合式API体验

通过一个简单的案例 体验Vue3新引入的组合式API

<template>
  <div>
    <button @click="add">{{ count }}</button>
  </div>
</template>
<script>
export default {
  data() {
    return { count: 1 };
  },

  methods: {
    add() {
      this.count++;
    },
  },
};
</script>

<script setup>
import { ref } from "vue";
const count = ref(1);
const add = () => {
  count.value++;
};
</script>

<template>
  <button @click="add">{{ count }}</button>
</template>

1.代码量变少了 2.分布式维护转为集中式维护

2- 使用creat-vue搭建Vue3项目

认识create-vue

creat-vue是Vue官方的脚手架工具，底层切换了vite(下一代前端工具链)，为开发提供极速响应

image.png

1.前提环境条件

已安装16.0或更高版本的Node.js

2.创建一个Vue应用

npm create vue@latest

这一指令将会安装并执行 create-vue

3-组合式API入口-setup

  1. setup选项的执行时机？ beforeCreate钩子之前 自动执行
  2. setup写代码的特点是什么？定义数据+函数 然后以对象方式return
  3. <script setup> 解决了什么问题？经过语法糖的封装更简单的使用组合式API
  4. setup中的this还指向组件实例吗？ 指向undefined

4-组合式API-reactive和ref函数

reactive() 作用：接受对象类型数据的参数传入并返回一个响应式的对象

核心步骤：

// 从vue包中导入reactive函数
import { reactive } from "vue";
// 执行函数 传入一个对象类型的参数 变量接受
const count = reactive({
  age: 18,
});
const addAge = () => {
  count.age++;
};
</script>

<template>
  <button @click="addAge">{{ count.age }}</button>
</template>

ref() 作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

核心步骤：

// 从vue包中导入ref函数
import { ref } from "vue";
// 执行函数 传入参数 变量接收(简单类型或者复杂类型)
const count = ref(18);
const addAge = () => {
//脚本区域修改ref产生的响应式对象数据 必须通过.value属性
  count.value++;
};
</script>

<template>
  <button @click="addAge">{{ count }}</button>
</template>

总结：

1.reactive和ref函数的共同作用是什么？

   用函数调用的方式产生响应式数据

2.reactive VS ref ？

   1.reactive不能处理简单类型的数据
   2.ref参数类型支持更好但是必须通过.value访问修改
   3.ref函数的内部使用依赖于reactive函数

3.在实际工作中推荐使用哪个？

    推荐使用ref函数，更加灵

5-computed计算属性函数

计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法

核心步骤：

1.导入computed函数

2.执行函数在回调参数基于响应式数据做计算的值，用变量接收

// 从vue包中导入computed函数
import { computed, ref } from "vue";
// 执行函数 传入参数 变量接收(简单类型或者复杂类型)
const list = ref([1, 2, 3, 4, 5, 6, 7, 8]);
const computedList = computed(() => {
  return list.value.filter((item) => item > 2);
});
</script>

<template>
  <div>大于2的值-{{ computedList }}</div>
</template>

6-watch侦听器

基础使用侦听单个数据

// 从vue包中导入computed函数
import { ref, watch } from "vue";
// 执行函数 传入参数 变量接收(简单类型或者复杂类型)
const age = ref(0);
// 调用watch侦听变化
watch(age, (newValue, oldValue) => {
  console.log("新值:", newValue, "输入前的值:", oldValue);
});
const add = () => {
  age.value++;
};
</script>

<template>
  <div>{{ age }}</div>
  <button @click="add">点击</button>
</template>

侦听多个数据

// 从vue包中导入computed函数
import { ref, watch } from "vue";
const age = ref(0);
const name = ref("张三");

// 调用watch侦听变化
watch([age, name], ([newValue, oldValue], [newName, oldName]) => {
  console.log([newValue, oldValue], [newName, oldName]);
});

const add = () => {
  age.value++;
  name.value = "李四";
};
</script>

<template>
  <div>{{ age }}</div>
  <div>{{ name }}</div>
  <button @click="add">点击</button>
</template>

immedeiate

说明：在侦听起创建时立即触发回调，响应式数据发生变化之后继续执行回调

语法：

    const count = ref(0)
    watch(count,()=>{]
    console.log('count发生了变化')
    },{
    immedeiate:true
    })

import { ref, watch } from "vue";

const age = ref(0);

watch(
  age,() => {
    console.log("age发生了变化");
  },
  //immediate为true立即执行
  { immediate: true }
);
</script>

<template>
  <div>{{ age }}</div>
</template>

deep 默认机制：通过watch监听的ref对象默认是浅层侦听，直接修改嵌套的对象属性不会出发回调执行，需要开启deep选项

const state = ref({ count:0 })
watch(state,()=>{
console.log("数据发生变化了"),
 { deep: true }
})

const changeState = ()=>{
state.value.count++
}

精确侦听对象的某个属性

需求：在不开启deep的前提下，侦听age的变化，只有age变化时才执行回调

image.png

7-组合式API-生命周期函数

一、Vue3中的生命周期 1、setup() : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

8、onActivated(): 被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

   
vue2           ------->      vue3
 
beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})
errorCaptured  -------->      onErrorCaptured(()=>{})

总结： Vue2和Vue3钩子变化不大，beforeCreate 、created  两个钩子被setup()钩子来替代。

avatar
文章
阅读
粉丝