Vue3_基础使用_1

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

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

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

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

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

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

代码：

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

<script lang="ts" setup> ...... </script>

2.引用说明

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

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

watch：引入监听

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

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

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

//html 中直接{{user}} <script lang="ts" setup> //引入 import {ref,reactive} from 'vue' let user=ref("php"); let pwd=ref("123456"); </script>

留意lang="ts" setup

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

//html中{{msg.id}} <script lang="ts" setup> //进入 import {ref,reactive} from 'vue' let msg=reactive({id:1,StationName:"珠海北"}); </script>

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

<script lang="ts" setup> //引入方法 import {ref,reactive,watch,watchEffect} from 'vue' //声明响应式数据 let info=ref({name:"evan.pei",age:30,skill:["vue","c#"]}); //方法 function updateAge(){ info.value.age++; } //watch,对象属性监听用方法()=>... watch(()=>info.value.age,(n)=>{console.log("age变成了",n)}); //watchEffect进行监听，他会自动去代码块中识别哪些要监听 watchEffect(()=>{ if(info.value.age>=35) info.value.name="EvanPei"; }); </script>

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