潍坊哪里做网站好,企业解决方案有哪些,调兵山 网站建设,怎么编写自己的网站相同点
都是要根据一个或多个响应式数据进行监听
不同点
computed 如要return回来一个新的响应式值#xff0c;且这个值不允许直接修改#xff0c;想要修改的话可以设置set函数#xff0c;在函数里面去修改所依赖的响应式数据#xff0c;然后计算属性值会基于其响应式依…相同点
都是要根据一个或多个响应式数据进行监听
不同点
computed 如要return回来一个新的响应式值且这个值不允许直接修改想要修改的话可以设置set函数在函数里面去修改所依赖的响应式数据然后计算属性值会基于其响应式依赖被缓存watch 监听一个或多个响应式数据当数据发生变化的时候可以去做一些修改其他值执行异步操作如发送求情,修改dom,然后watch默认是懒侦听的也就是说刚进入页面的时候不会触发仅在侦听源发生变化的时候才会执行回调函数这个时候我们可以设置immediate为true这表示在侦听器创建时立即触发回调如果侦听源是对象我们想做深层次侦听我们需要设置deep为true
computed
接受一个getter函数返回一个只读的响应式ref对象该ref对象通过.value暴漏getter函数的返回值
script setup langtsconst a ref(小明);const b ref(小红);const c computed(() ${a.value}_${b.value});
/scripttemplate{{ c }}
/template这个时候页面上会显示 小明_小红 这个时候也不知道有了个什么样的需求我想要给c赋值如c.value 小花 可以看到是不行的因为这个时候computed返回的只是一个只读的ref接着往下看
script setup langtsconst a ref(小明);const b ref(小红);const c computed({get() {return ${a.value}_${b.value};},set(val) {console.log(val);},});const changeC () {c.value 小花;};
/scripttemplate{{ c }}a-button clickchangeC改变C/a-button
/template这个时候点击按钮后可以看到控制台会输出小花,这个时候你可以做一些操作比如 这个时候页面上就会展示
vue的计算属性会自动追踪响应式依赖它会检测到c依赖于a,b也就是说当a或者b改变时c就会同时更新计算属性值会基于其响应式依赖被缓存 一个计算属性仅在其响应式依赖更新时才重新计算这意味着a或b不改变无论访问c多少次都会立即返回先前计算的结果而不用重复执行getter函数getter不应有副作用也就是说不要在计算属性里面去改变其他状态不要在getter中去做异步请求以及改变dom如果有这种需求则要到watch去操作避免直接修改计算属性值如果想要修改计算属性的值应该去更新它所依赖的响应式字段也就是说我们想要改变c那么我们应该想的是如何去改变a和b
watch
侦听一个或多个响应式数据源并在数据变化时调用所给的回调函数
const x ref(0)
const y ref(0)// 单个 ref
watch(x, (newX) {console.log(x is ${newX})
})// getter 函数
watch(() x.value y.value,(sum) {console.log(sum of x y is: ${sum})}
)// 多个来源组成的数组
watch([x, () y.value], ([newX, newY]) {console.log(x is ${newX} and y is ${newY})
})如果有以下需求 要是用
script setup langtsconst obj reactive({count: 0,});watch(// 提供一个getter函数() obj.count,count {console.log(做一些操作);});
/scriptwatchEffect
我的理解就是比如说我们要监听一个id发生变化的时候我们要去请求一个接口获取详情 用watch的写法
const todoId ref(1)
const data ref(null)watch(todoId,async () {const response await fetch(https://jsonplaceholder.typicode.com/todos/${todoId.value})data.value await response.json()},{ immediate: true }
)我们需要监听todoId然后… 现在如果使用watchEffect可以这样写
watchEffect(async () {const response await fetch(// 逻辑里面必须要有todoId的使用否则todoId变化了也不会监听https://jsonplaceholder.typicode.com/todos/${todoId.value})data.value await response.json()
})
