网站建设运营岗位职责,网络营销用什么软件,网页与网站设计说明,网络公司网站设计维护合同系列文章目录 提示#xff1a;阅读本章之前#xff0c;请先阅读目录 文章目录系列文章目录前言Vue 3.0 创建与Vue2.0对比的变化关闭语法检查setup 组合式函数compositions响应式数据 refreactive 函数Vue3.0 响应原理ref 和 reactive 区别setup 注意点computed 计算函数watch…系列文章目录 提示阅读本章之前请先阅读目录 文章目录系列文章目录前言Vue 3.0 创建与Vue2.0对比的变化关闭语法检查setup 组合式函数compositions响应式数据 refreactive 函数Vue3.0 响应原理ref 和 reactive 区别setup 注意点computed 计算函数watch 函数watchEffectVue 3.0 生命周期自定义Hook前言 Vue 3.0 创建 与Vue2.0对比的变化 关闭语法检查 lintOnSave: false setup 组合式函数compositions 第二种渲染函数 响应式数据 ref
ref reference impl implement 在template模板里面会自动读取.value 通过ref函数就可以实现响应式数据 其实通过ref函数即可生成一个引用对象底层上还是用的Object.defindProperty用的getter和setter方法其次这里的value是通过原型对象实现的相当于vue2.0的_data reactive 函数 Vue3.0 响应原理 Vue3.0真正使用的是Reflect反射会返回一个布尔值执行成功返回true执行失败返回false ref 和 reactive 区别 setup 注意点 computed 计算函数 watch 函数 setup() {let name ref(哈哈哈)let age ref(9999)let obj reactive({a: hhhh,age: 9999,job: {a: {c: pppp}}})// 情况1监视基本类型watch(name, (newValue, oldValue) {console.log(newValue, oldValue)}, {immediate: true})// 情况2监视多个基本类型watch([name, age], (newValue, oldValue) {console.log(newValue, oldValue)}, { deep: false }) // 这里是无法关闭深度监听的// 情况3监视对象输出的oldValue是和newValue一样的watch(obj, (newValue, oldValue) {console.log(newValue, oldValue)})// 情况4监视某个属性watch(() obj.a, (newValue, oldValue) {console.log(newValue, oldValue)})// 情况5监视某些属性watch([() obj.a, obj.age], (newValue, oldValue) {console.log(newValue, oldValue)})// 情况6监视对象里面的对象watch(() obj.job.a.c, (newValue, oldValue) {console.log(newValue, oldValue)}, { deep: true }) // 必须的开深度监听return {name,obj}}watchEffect Vue 3.0 生命周期 带on的优先级高于配置项 自定义Hook
