齐齐哈尔北京网站建设,制作一个个人网站,长沙公司网络推广,seo优化内容所谓响应式就是界面和数据同步#xff0c;能实现实时更新。
Vue 中用过三种响应式解决方案#xff0c;分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。
1. ref和reactive
vue3中实现响应…所谓响应式就是界面和数据同步能实现实时更新。
Vue 中用过三种响应式解决方案分别是 defineProperty、Proxy 和 value setter。Vue 2 使用的方案是 defineProperty API。Vue3中使用的方案是Proxy和value setter。
1. ref和reactive
vue3中实现响应式数据的方法是使用ref和reactive。
reactive更推荐去定义复杂的数据类型ref 更推荐定义基本类型。
通过reactive定义响应式数据。
templatedivh1 clickadd{{ obj.count }} * 2 {{ double }}/h1/div
/templatescript setup
import { computed, reactive, watchEffect } from vue;let obj reactive({ // reactive包括复杂数据类型使其成为响应式数据。count: 1
})function add() { // 改变obj.count属性。与ref的不同。obj.count
}let double computed(()obj.count*2) // double会自动跟随obj.count变化watchEffect(() {console.log(数据被修改了,obj.count,double.value) // 控制台可以看到double数据变化了通过double.value。
})/script通过ref定义响应式数据。修改数据要通过.value。
templatedivh1 clickadd{{ count }} * 2 {{ double }}/h1/div
/templatescript setup
import { computed, ref, watchEffect } from vue;let count ref(1) // ref包裹简单数据类型使其成为响应式数据修改数据要通过.valuefunction add() { // 改变count通过count.value修改值方式与reactive包裹的数据不同count.value;
}let double computed(()count.value*2) // double会自动跟随count变化watchEffect(() {console.log(数据被修改了,count.value,double.value) // 控制台可以看到double数据变化了
})/script通过这两个例子对比了ref和reactive的区别。
watchEffect 这个函数让我们在数据变化之后可以执行指定的函数。
2. watchEffect举个例子
使用 watchEffect在数据变化之后把数据同步到 localStorage 之上实现 todolist 和本地存储的同步。修改 https://liuchunming.blog.csdn.net/article/details/130508826 第五小节的代码在function useTodos()中添加如下两行的代码。
...
let todos ref(JSON.parse(localStorage.getItem(todos)||[]));
watchEffect((){ localStorage.setItem(todos,JSON.stringify(todos.value))
})
...效果 添加待办项后todos这个响应式变量发生变化watchEffect中的回调函数就会自动执行将todos添加到localstorge中。 当清理待办项后todos这个响应式变量也会发生变化watchEffect中的回调函数就会自动执行将todos添加到localstorge中。
3. watch举个例子
需求在 loading 状态下去修改浏览器的小图标 favicon。
通过watch监听favicon变化修改href标签属性。 watch(WatcherSource, Callback, [WatchOptions]) 参数 WatcherSource想要监听的响应式数据。 Callback执行的回调函数入参newValue, oldValue。 [WatchOptions]deep、immediate、flush可选。 对于WatchOptions的参数配置 deep:当需要对对象等引用类型数据进行深度监听时设置deep: true,默认值是false。 immediate默认情况下watch是惰性的设置immediate: true时watch会在初始化时立即执行回调函数一次。 flush控制回调函数的执行时机。它可设置为 pre、post 或 sync。 pre默认值当监听的值发生变更时优先执行回调函数在dom更新之前执行。 postdom更新渲染完毕后执行回调函数。 sync:一旦监听的值发生了变化同步执行回调函数建议少用。 参考资料https://blog.csdn.net/weixin_42349568/article/details/126760186
实现需求
utils中新建一个favicon.js文件。我们把对图标的对应修改的操作封装成了 useFavicon 函数并且通过 ref 和 watch 的包裹我们还把小图标变成了响应式数据。
import { ref, watch } from vue;// 【知识点1】变量和常量定义
// let是ES6中新增的声明变量的关键字。 let声明的变量只在所处的块级作用域有效也就是所声明的大括号内。let定义的变量不存在变量提升。
// var 声明变量不具备这个块级作用域的特性。在大括号外也可以访问。使用var声明变量的时候其作用域在所在的函数内而且存在变量提升。
// const关键字。ES6中除了新增的声明常量的关键字这里的常量就是值值不能变化的量。必须赋值否则就会报错。具有块级作用域只在所处的块级作用域有效也就是所声明的大括号内。// 【知识点2】JS中的代表箭头函数
// 当只有一个参数时圆括号是可选的(singleParam) { statements } 可以写成singleParam {statements }
// 没有参数的函数应该写成一对圆括号() { statements }
// statements简单的也可以去掉大括号el el.href ${icon}export default function useFavicon(newIcon) { //export default只能有一个const favicon ref(newIcon);const updateIcon (icon) { //更新icondocument.head.querySelectorAll(link[rel*icon]) //反引号括起来的字符串叫模板字符串里面可以放空格、换行符等还可以放JS表达式${}.forEach(el el.href ${icon})}const reset () favicon.value /vite.svg //重置icon, 通过修改faivcon.valuewatch(favicon, // 监听favicon变化(i) { // favicon变化后执行的回调函数updateIcon(i);})return { favicon, reset };
}在关于页面调用更换favicon的功能
templateh1这是关于页面/h1button clickloadding更换图标/buttonbutton clickreset重置图标/button
/templatescript setup
import useFavicon from ../utils/favicon;
let {favicon, reset} useFavicon();
function loadding(){favicon.value /geek-favicon-32x32.webp
}
/script点击更换图标herf变成/geek-favicon-32x32.webp 点击重置图标herf变回/vite.svg
4. watchEffect和watch区别
watchEffect 不需要指定监听的属性他会自动的收集依赖 只要我们回调中引用到了 响应式的属性 那么当这些属性变更的时候这个回调都会执行而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。就是 watch 可以获取到新值与旧值更新前的值而 watchEffect 是拿不到的。是 watchEffect 如果存在的话在组件初始化的时候就会执行一次用以收集依赖与computed同理而后收集到的依赖发生变化这个回调才会再次执行而 watch 不需要因为他一开始就指定了依赖
