vue3 基础知识

涵盖内容：（建议5min）

vite

安装

volar

根元素

setup语法糖

reactive

ref

计算属性

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1.vite开发者工具（快）

2.安装项目过程

npm init vue@latest
​
cd name（项目name）
​
npm install（装包）
​
npm run dev（启动项目）

 

3.volar 是 vue3 的配套，vetur 是 vue2 的配套，所以，建议使用的时候依据自己使用的 vue 版本来选择

4.template里面支持多个根元素--》对比vue2

5.setup setup执行时期早于beforecreate，，，故而setup里面也无法获取this

原始复杂写法：(必须要有return)

<script>
export default {
  setup() {
    console.log("我是setup标签");
    const message = "hello world";
    const logMessage = () => {
      console.log(message, "打印一下");
    };
    return {
      message,
      logMessage,
    };
  },
  beforeCreate() {
    console.log("我是beforecreate标签");
  },
};
</script>
​
<template>
  <div>{{ message }}</div>
  <br />
  <button @click="logMessage">点击</button>
</template>

更新之后的写法(setup语法糖)

<script setup>
const message = "hello world";
const logMessage = () => {
  console.log(message, "打印一下");
};
</script>

6.

reactive ： 接收一个对象类型的数据，返回一个响应式的数据

<script setup>
import { reactive } from "vue";
const state = reactive({
  count: 100,
});
const changeCount = () => {
  state.count++;
};
</script>
​
<template>
  <div>{{ state.count }}</div>
  <br />
  <button @click="changeCount">点击</button>
</template>

7.ref :接收简单类型或者复杂数据类型，返回一个响应式对象

本质：是在原有数据传入的基础上，外层包了一层对象，包成了复杂数据类型，借助reactive实现的响应式

注意点：

1.脚本js中访问数据，需要通过 .value

2.template中，value无需加，相当于自动扒了一层

<script setup>
import { ref } from "vue";
const state = ref(666);
const changeCount = () => {
  state.value++; //此处加上.value   template中无需加上.value
};
</script>
​
<template>
  <div>{{ state }}</div>
  <br />
  <button @click="changeCount">点击</button>
</template>

基本上建议直接使用ref 无论是基本数据类型还是复杂数据类型都是可以使用ref

8.计算属性

<script setup>
import { computed, ref } from "vue";
const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const computeList = computed(() => {
  console.log(list);
  console.log(list.value); //list.value才可以取到数组里面值
  return list.value.filter((e) => e > 2);
});
const changeList = () => {
  list.value.push(666); //list.value才可以取到数组里面值
};
</script>
​
<template>
  <div>{{ list }}</div>
  <div></div>
  <div>{{ computeList }}</div>
  <br />
  <button @click="changeList">点击</button>
</template>