vue3基础知识

一. 创建vue3项目

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

1.1 使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

因为只是初步学习vue3, 所有不需要其他的一些配置项

二. 组合式API

2.1 setup

原始的复杂写法

setup 相当于一个钩子函数, 是第一个执行的钩子函数, 在 beforeCreate 之前

<script>
  export default {
    setup(){
      const message = 'message'
      const logMessage = ()=>{
        console.log(message)
      }
      //要想数据可以渲染到界面,必须return才可以
      return {
        message,
        logMessage
      }
    },
    beforeCreate(){
      
    }
  }
</script>

语法糖–简单写法

script标签添加 setup标记，不需要再写导出语句，默认会添加导出语句

<script setup>
  //省略导入
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
  //省略return
</script>

2.2 reactive 和 ref

reactive 和 ref 的异同

同: 都是用来生成响应式数据

不同:

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

推荐: 推荐使用ref函数，减少记忆负担

reactive 创建响应式数据

reactive 适合创建对象的响应式数据

<script setup>
// vue3中, 通过reactive 和 ref 创建 --响应式--的数据
import { reactive, ref } from 'vue';
//  reactive 适合创建对象的响应式数据
const info = reactive({
  msg: 'Hello Vue3',
});
const onBtn = () => {
  // console.log(msg);
  info.msg = 'hello world';
};
</script>

ref 创建响应式数据

ref 可以创建 简单/复杂 数据的响应式

要获取ref 中创建的值 , 必须要在对象前面 加 value

变量名.value

<script setup>
// vue3中, 通过reactive 和 ref 创建 --响应式--的数据
import { reactive, ref } from 'vue';
// ref 可以创建 简单/复杂 数据的响应式
//1.简单
const age = ref(22);
// ref 修改值---age.value
const onAge = () => {
  age.value++;
};
//2.复杂 user.value.name
const user = ref({ name: 'zz' });
const onUser = () => {
  user.value.name = 'xx';
};
</script>

2.3 computed

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

语法:

<script setup>
// 导入
import {ref, computed } from 'vue'
computed(function(){} )
</script>

使用:

1. 只用

<script setup>
import { ref, computed } from "vue";
const list = ref([
{ id: 1, name: "zz", isChecked: true },{ id: 2, name: "xx", isChecked: false },{ id: 3, name: "ww", isChecked: false },
]);
const onAdd = () => {
  list.value.push({ id: 4, name: "qq" });
};
//计算属性---计算list的长度
const count = computed(() => list.value.length);
</script>

2. 既要用 , 又要改

 <ul>
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.isChecked" />
      </li>
    </ul>
      <input type="checkbox" v-model="isAllChecked" /> 全选/全不选
_____________________________

//计算属性,既要用又要改
const isAllChecked = computed({
  //用
  get() {
    return list.value.every((item) => item.isChecked);
  },
  //改
  set(val) {
    list.value.forEach((item) => (item.isChecked = val));
  },
});

2.4 watch

侦听一个或者多个数据的变化，数据变化时执行回调函数

immediate控制立刻执行，deep开启深度侦听

简单数据类型

<script setup>
import { ref, watch } from 'vue';
//数据 count
const count = ref(22);
const setCount = () => {
  count.value++;
};
//数据num
const num = ref(90);
const setNum = () => {
  num.value++;
};
</script>

• 监听单个数据

<script setup>
/* 简单类型 */
//1.监听单个数据
watch(count, (newCount, oldCount) => {
  console.log('count', newCount, oldCount);
});
</script>

• 监听多个数据

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

<script setup>
/* 简单类型 */
//2.监听多个数据
watch(
  [count, num], //多个数据 --数组--
  ([newCount, newNum], [oldCount, oldNum]) => {
    console.log('新值', newCount, newNum);
    console.log('旧值', oldCount, oldNum);
  },
  {
    immediate: true, //监听器立即执行
  }
);
</script>

复杂数据类型

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

<script setup>
/* 复杂类型 */
const userInfo = ref({
  name: 'zz',
  info: {
    sex: 'boy',
  },
});

const setSex = () => {
  userInfo.value.info.sex = 'girl';
};

//监听复杂数据-----必须要开启深度监听
watch(
//默认情况下,深度监听对象,回调中的新值和旧值是同一个
//如果相对新旧值做区分
// 1.第一个参数,以函数的形式将那个值返回即可(此时没必要开启深度监听)
  // userInfo,
  () => userInfo.value.info.sex,
  (newVal, oldVal) => {
    console.log('userInfo', newVal, oldVal);
  }
  // {
  //   deep: true, //开启深度监听
  // }
);
</script>

三. 生命周期函数

组合式生命周期函数, 可以执行多次

四. 组件通信

4.1 父向子传值

基本思想

1. 父组件中给子组件绑定属性
2. 子组件内部通过defineProps选项接收数据

4.2 子向父传值

基本思想

1. 父组件中给子组件标签通过@绑定事件
2. 子组件内部通过 defineEmits 方法触发事件

4.3 任意组件传值

基本思想

1. 传值组件，通过 provide函数 传值
2. 接收值的组件，通过inject 函数获取数据

传递数据/方法

provide('key',数据/ref对象/方法)

接收数据/方法

injext('key')

4.4 v-model:propName 语法糖

在vue2 中可以使用.sync 修饰符来对一个数据进行 既用又改 的操作

但vue3 中废弃了.sync 修饰符, 改用 v-model:propName 来代替 .sync 对数据 进行 既用又改 的操作

v-model:propName 的原理

1. 绑定 :msg=“msg”
2. 监听事件 @update:msg=“msg”
   
   v-model:propName 和 .sync 一样 可以 多次使用

但如果组件中只有一个属性既要用又要改, 可以使用v-model

v-model 的原理

1. 默认绑定的属性名:modelValue

2. 默认监听的事件名: update:modelValue
   

五. ref引用标签/组件

实现步骤：

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签

5.1 ref 获取标签

<h1 ref="h1Ref">ref dom 元素</h1>
___________________________________
<script setup>
import { onMounted, ref } from 'vue';
const h1Ref = ref(null);
//在onMounted 中 调用 标签
onMounted(() => {
  console.log(h1Ref.value);
});
</script>

5.2 ref 获取组件

<my-ref ref="compRef" />
_________________________________
<script setup>
import MyRef from './MyRef.vue';
import { onMounted, ref } from 'vue';

const compRef = ref(null);
onMounted(() => {
//要想访问到组件内的数据,
//要在组件内通过defineExpose向外暴露
  console.log(compRef.value.num);
});
</script>

注意:

默认情况下在

所有,要想访问组件内的数据和方法,都要通过defineExpose才可以 defineExpose({ num });

<script setup lang="ts">
import { ref } from 'vue';
const num = ref(22);
// 当前setup语法糖场景下,组件内的属性和方法对外不可见
//可以通过 defineExpose 向外暴露
defineExpose({ num });

d(() => {
//要想访问到组件内的数据,
//要在组件内通过defineExpose向外暴露
console.log(compRef.value.num);
});

**注意:** 

默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的

所有,要想访问组件内的数据和方法,都要通过`defineExpose`才可以 `defineExpose({ num });`

```js
<script setup lang="ts">
import { ref } from 'vue';
const num = ref(22);
// 当前setup语法糖场景下,组件内的属性和方法对外不可见
//可以通过 defineExpose 向外暴露
defineExpose({ num });