Vue3+TS笔记

创建工程：npm init vue@latest

Vue3

工程结构

在main.js中：

引入的vue更轻量，引入vue是一个更精简版的名为createApp的工厂函数

import {
    createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

vm实例对象上有一个mount方法，不是原型上的$mount了，用这个方法挂载vm

在组件中，组件可以没有根标签

其他的和vue2项目一样

语法

新的配置项

setup

setup是一个函数。组件中所有使用的数据、方法等全部写在setup中。

setup的两种返回值：

1.对象：

该对象中的属性、方法在模板中均可直接使用

<template>
  <p>我叫{
  { name }}，已经{
  { age }}岁了</p>
  <button @click="say">click me</button>
</template>

<script>
export default {
  name: "App",
  setup() {
    let name = "abc";
    let age = 18;
  
    function say() {
      alert("你好");
    }
  
    return { name, age, say };
  },
};
</script>

2.渲染函数：

可以自定义渲染内容

import {
    h } from "vue";
export default {
   
  name: "App",
  setup() {
   
    let a = 1;
    let b = 2;
    return () => {
   
      return h("h1", "你好");
    };
  },
};

如果返回一个函数，函数返回值是字符串，那页面就展示字符串

setup方法不能是async的

不建议把vue2和3的配置混用

注意项

setup执行顺序在最早的钩子之前，没有this指向

不能通过this拿到任何东西，但可以setup(props){}接收参数

setup接收的参数来自配置项props

props可以选择接收哪些值

setup(props, context)第二个参数是上下文。

context中有attrs，是个对象，包含外部传过来但没有在props中声明的属性

context中有slots，收到的插槽内容

context中有emit，分发自定义事件的函数

vue3中父组件给子组件绑定事件，子组件中要用emits配置项声明一下，否则报警告

语法糖

<template>
  <div>{
  { abc }}</div>
</template>
  
<script setup lang="ts">
let abc = 1;
</script>

<style scoped>
</style>

在vue3的项目中一般出现两个script标签，一个有setup一个没有，setup用来配置数据等，一个用来配置组件名等

为了解决组件名可以用vite-plugin-vue-setup-extend插件解决，使用插件后再script上加name="xxx"可以定义名字

npm i vite-plugin-vue-setup-extend

![[vite_plugin_vue_setup_extend.jpg]]

ref函数

作用：定义一个响应式的数据

引用：import { ref } from "vue";

<template>
  <p>我叫{
  { name }}，已经{
  { age }}岁了</p>
  <button @click="say">click me</button>
</template>
  
<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("你好");
    let age = ref(18);
  
    function say() {
      name.value = "不好";
      age.value = 20;
    }
  
    return { name, age, say };
  },
};

使用ref函数会返回一个refImpl（引用实例对象），调用的时候传一个初始值

这个对象中有一个value属性，值就是当前的值

修改它的value值vue会执行数据响应式等操作

在模板中不需要写.value，会自动处理

ref可以传递对象类型，取值不需要再.value了，因为里面不是ref了。内部借助了vue3中的新函数reactive

reactive函数

定义一个对象类型的响应式数据（基本类型用ref函数）

import {reactive} from 'vue'

reactive(源对象)返回一个代理对象（Proxy的实例对象）

它定义的响应式对象是深层的

ref和reactive的区别

ref可以定义基本类型和对象类型（有对象类型借助reactive）

reactive只能定义对象类型

ref的变量必须用.value（可以用volar插件自动添加.value）

reactive使用后这个对象的地址不能改变，要用Object.assign(obj,newObj)，ref可以直接改，但是不能越过.value：sum = ref(9)应该是：sum.value = 9

层级较深建议用reactive，例如表单

toRefs

把一个reactive对象中的每一个键值对分成多个ref，修改这些ref的值，原来的响应式对象同步更新

<template>
  <div>{
  { obj }}</div>
  <button @click="add">click me</button>
</template>
  
<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
  
let obj = reactive({
  name: "a",
  age: 18,
});
  
let { name, age } = toRefs(obj);
  
function add() {
  name.value += "~";
  age.value += 1;
}
</script>
  
<style scoped>
</style>

toRef

和toRefs同理，把一个响应式对象的某一个键的值拿出来做成ref，修改这个ref同步修改原响应式对象，语法toRef(obj, "name")

computed

import {computed} from 'vue'

传递方法：（只读）

let sum = computed(()=>{ return a+b })

传递对象：

let sum = computed({
   
	get(){
   
		return a.value+b.value;
	},
	set(val){
   
		a.value = val;
		b.value = 0;
	}
})

如果计算属性调用多次，依赖变量值没有变化，不会重新计算，直接拿之前计算过的返回值

watch

import {watch} from 'vue'

监视ref基本用法，监视地址值：

const stopWatch = watch(sum, (newVal, oldVal)=>{
   
	console.log(newVal, oldVal)
})

stopWatch()

深度监视ref对象类型，加配置对象：

const stopWatch = watch(sum, (newVal, oldVal)=>{
   
	console.log(newVal, oldVal)
}, {
   
	deep: true,
	immediate: true
})

stopWatch()

注意：如果修改对象，地址相同