Vue3_基础使用_1

这节主要介绍：  vue2与vue3的区别，创建响应式的数据，setup语法糖的使用，watch监听，及vue3创建项目。

vue2的选项式与vue3的组合式区别：

选项式：vue2中数据与方法计算属性等等，针对一个数据的处理在不同的配置中，当业务复杂时很难维护，修改起来也不好查找。

vue3的组合式：将针对数据的方法计算属性等等放在一起管理，利于管理，方便查找。

0.创建项目，到文件夹cmd 输入：  npm create vue@latest

    然后输入一个项目名称，然后除了TypeScript为YES其他都选NO到最后会生成一个项目。

代码：

1.在其中定义：变量，数组，对象，方法    html中就能直接{{}}使用

2.引用说明

ref：添加响应式的   简单变量  和   对象，使用需要加 .value  可以借助插件自动补全.value

reactive：只是给对象添加响应式,使用不用加.value

watch：引入监听

watchEffect：引入更高级的监听，不需要告诉他监视什么，他自己根据你的代码去识别。

import {ref,reactive,watch,watchEffect} from 'vue'

3.使用ref创建一个可以使用的简单的变量。

//html 中直接{{user}}

留意lang="ts" setup

4.使用reactive创建一个可以使用的简单的对象。

//html中{{msg.id}}

5.当中可以创建计算属性，方法，监视等等

6.计算属性

//计算属性
import {computed} from 'vue'
let name=computed(()=>{return name+"~";})
//toRefs:结构化赋值后可以直接用 let{name,age}=toRefs(person)将大括号中的变量转为ref的。

7.停止监视     接收wacth用于停止，deep:true深度监视对象里面全部都监视

//监视 watch
import {watch,watchEffect} from 'vue'
const stopWatch=watch(sum,(newV,oldV)=>{ 
    ...逻辑
	if(newV>=10)
		stopWatch();//停止监视
},
{deep:true,//深度监视 
 immediate:true//立即监视
})

8.其他

//因为reactive不能直接替换整个对象，需要借助Object.assign
//这个相当于把对象的每个值赋值一遍而不是直接替换对象
Object.assign(person,{...});
//监视对象中的某一个属性,或者是对象(如需深度监视加deep:true)
watch(()=>{return person.name},(n,o)=>{...})
//同时监视多个
watch([()=>person.name,()=>person.car.c1],()=>{...})
//watchEffect监视，不需要指定监视谁它自己根据你写的逻辑去分析
watchEffect(()=>{...})//直接写逻辑

9.插件：可以设置name,自动加.value