做贸易把产品放到哪个网站好呢,做平面的公司网站,佛山网站建设明细,网页源代码提取视频vue2的选项式与vue3的组合式区别#xff1a;
选项式#xff1a;vue2中数据与方法计算属性等等#xff0c;针对一个数据的处理在不同的配置中#xff0c;当业务复杂时很难维护#xff0c;修改起来也不好查找。 vue3的组合式#xff1a;将针对数据的方法计算属性等等放在一…
vue2的选项式与vue3的组合式区别
选项式vue2中数据与方法计算属性等等针对一个数据的处理在不同的配置中当业务复杂时很难维护修改起来也不好查找。 vue3的组合式将针对数据的方法计算属性等等放在一起管理利于管理方便查找。 0.创建项目到文件夹cmd 输入 npm create vuelatest 然后输入一个项目名称然后除了TypeScript为YES其他都选NO到最后会生成一个项目。
代码
1.在其中定义变量数组对象方法 html中就能直接{{}}使用
script langts setup
......
/script
2.引用说明
ref添加响应式的 简单变量 和 对象使用需要加 .value 可以借助插件自动补全.value
reactive只是给对象添加响应式,使用不用加.value
watch引入监听
watchEffect引入更高级的监听不需要告诉他监视什么他自己根据你的代码去识别。
import {ref,reactive,watch,watchEffect} from vue
3.使用ref创建一个可以使用的简单的变量。
//html 中直接{{user}}
script langts setup//引入import {ref,reactive} from vuelet userref(php);let pwdref(123456);
/script
留意langts setup
4.使用reactive创建一个可以使用的简单的对象。
//html中{{msg.id}}
script langts setup//进入import {ref,reactive} from vuelet msgreactive({id:1,StationName:珠海北});
/script
5.当中可以创建计算属性方法监视等等
script langts setup//引入方法import {ref,reactive,watch,watchEffect} from vue//声明响应式数据let inforef({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.age35)info.value.nameEvanPei;});
/script
6.计算属性
//计算属性
import {computed} from vue
let namecomputed((){return name~;})
//toRefs:结构化赋值后可以直接用 let{name,age}toRefs(person)将大括号中的变量转为ref的。
7.停止监视 接收wacth用于停止deep:true深度监视对象里面全部都监视
//监视 watch
import {watch,watchEffect} from vue
const stopWatchwatch(sum,(newV,oldV){ ...逻辑if(newV10)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
