海宁营销型网站建设价格培训计划方案
这节主要介绍： 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
