seo网站关键词优化wordpress怎么加插件

当前位置： 首页 > news >正文

seo网站关键词优化,wordpress怎么加插件,如何查找网站建设时间,吕梁市城乡建设局网站上一节说到了 computed计算属性对比 #xff0c;虽然计算属性在大多数情况下更合适#xff0c;但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法#xff0c;来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时#…上一节说到了 computed计算属性对比 虽然计算属性在大多数情况下更合适但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时这个方式是最有用的。 Vue2 watch用法 Vue2 中的 watch 是一个对象键是需要观察的表达式值是对应回调函数。值也可以是方法名或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()遍历 watch 对象的每一个 property。 Vue2 存在两种监听方式分别是简单监听和复杂监听 简单监听监听的是一个回调函数当监听的值发生改变时才会执行监听动作。 templateh2当前求和值为{{ sum }}/h2button clicksum点击加1/button /templatescriptexport default {name: TestComponent,data() {return {sum:1}},watch:{sum(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);}}, }; /script上面的是一个最简单的监听动作只有在点击按钮 sum 的值变化之后监听器 watch 才会触发。同时我们还可以将这个方法放到 methods 中通过方法名的方式在 watch 中实现监听效果 watch:{sum:sumAdd},methods: {sumAdd(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);}}, 深度监听监听的是一个包含选项的对象。除了包含简单监听的功能之外还包含深度监听、初始化监听等。 首先我们可以通过对象形式来实现简单监听的效果还是按照上面的例子例如 // 其余代码一致 watch:{sum:{handler(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);}} }, 通过对象形式实现深度监听 – deeptrue 该回调会在任何被侦听的对象的 property 改变时被调用不论其被嵌套多深也就是说即使监听的是一个对象形式的数据只要对象内部属性发生变化都能被监听到。 watch:{sum:{handler(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);},deep:true} }, 通过对象形式实现初始化监听 – immediatetrue 该回调将会在侦听开始之后被立即调用也就是说在组件初始化时就会监听一次在数据改变之后继续监听 watch:{sum:{handler(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);},immediate:true} }, 完整的对象监听深度监听初始化监听 watch:{sum:{handler(newValue, oldValue) {console.log(sum的值变化了,newValue, oldValue);},deep: true,immediate:true} }, 在Vue3 中使用 Vue2 的watch 和 在 Vue3 中使用 Vue2 的computed 计算属性一样直接使用 watch 配置项即可。 templateh2当前求和值为{{ sum }}/h2button clicksum点击加1/button /templatescript import { ref } from vue;export default {name: TestComponent,watch: {sum: {handler(newValue, oldValue) {console.log(sum的值变化了, newValue, oldValue);},deep: true,immediate: true,},},setup() {let sum ref(1);return {sum,};}, }; /script当页面第一次渲染时监听器就执行了一次这对应的是  – immediate: true 点击按钮之后页面渲染同时监听器也会同步触发。 Vue3 中 watch的基本使用  和 computed 一样组合式api在使用时需要先引入再使用。 Vue3 中的 watch 是一个函数接收三个参数 第一个参数是需要被监听的数据( 单个数据数组格式的多个数据)第二个参数是回调函数用来处理监听之后的动作第三个参数则是监听配置项( 深度监听、初始化监听 )。 但是和 computed 不一样的是 在 setup 中定义的监听器不需要使用变量接收且 return 返回的因为 监听是一种行为而计算属性则是一个值。  templateh2当前求和值为{{ sum }}/h2button clicksum点击加1/button /templatescript //组合式api需要先引入再使用 import { ref ,watch} from vue;export default {name: TestComponent,setup() {let sum ref(1);// 不用接收不用返回因为监听是动作计算属性、响应式数据、函数都是值watch(sum, (newValue, oldValue) {console.log(sum的值变化了, newValue, oldValue);})return {sum,};}, }; /scriptVue3 中 watch 的复杂使用方式 上面说的Vue3 中 watch 的简单使用方式其实就是监听单个 ref 定义的响应式数据。但是 Vue3 中的 watch 可以分为好几种情况 情况一通过 watch 监听 ref 定义的单个基础类型响应式数据也就是上面的例子 情况二通过 watch 监听 ref 定义的多个基础类型响应式数据例如 templateh2当前求和值为{{ sum }}/h2button clicksum点击加1/buttonbrh2当前msg值为{{ msg }}/h2button clickmsg !点击加!/button /templatescript import { ref ,watch} from vue;export default {name: TestComponent,setup() {let sum ref(1);let msg ref(你好啊)watch(sum, (newValue, oldValue) {console.log(sum的值变化了, newValue, oldValue);})watch(msg, (newValue, oldValue) {console.log(msg的值变化了, newValue, oldValue);})return {sum,msg};}, }; /script但是这么写很明显太麻烦了我想监听多个那我就需要写多个 watch 监听函数还不如 Vue2的配置项直接定义一个对象来的方便所以Vue3 也提供了简便写法那就是通过数组形式一次性监听多个数据 // 通过 [sum,msg] 一次性监听多个数据 watch([sum,msg], (newValue, oldValue) {console.log(sum或msg的值变化了, newValue, oldValue); }) 同时我们改变 sum和msg发现返回的 newValue 和 oldValue 分别是两个数组 第一步改变 sum newValue 数组中 sum 值改变msg值不变oldValue 数组中的值就是 sum 和 msg 的初始值第二步改变 msgnewValue 数组中 sum 值不变msg值改变变oldValue 数组中的值就是 sum 和 msg 的上一次的值 情况三通过 watch 中的 immediate: true 初始化监听 ref 定义的基础类型响应式数据 watch(sum, (newValue, oldValue) {console.log(sum的值变化了, newValue, oldValue); },{immediate: true}) 可以发现初始化监听成功在组件初始化 sum 未发生改变时 监听动作就已经执行了。 情况四通过 watch 监听 ref 定义的对象类型的响应式数据 – 存在bug( 无法正确获取 oldValue ) 我们用 ref 定义一个响应式对象数据但是这两有两个点需要注意 通过 ref 定义的对象数据其实底层还是通过 reactive 来实现响应式的通过 ref 定义的数据是一个 RefImpl对象在 js 代码中使用时不会自动解包需要 .value  templatep{{person.name}}/pp{{person.age}}/pbutton clickperson.name ~更改name/buttonbutton clickperson.age更改age/button /templateexport default {name: TestComponent,setup() {let person ref({name: al,age: 28,});watch(person.value, (newValue, oldValue) {console.log(person的值变化了, newValue, oldValue);});return {person,};}, }; 然后我们就会发现下面这么问题 当更改 name 属性时newValue 中的 name 改变了但是 oldValue 中的 name 也同步变了当更改 age 属性时newValue 中的 age改变了但是 oldValue 中的 age也同步变了 这和我们想的也太不一样了啊不是说好了 oldValue 是上一次的值么怎么还同步更新了呢 这其实就是 Vue3 的监听bug暂时官方也没有给出具体的解决办法但是其实我们在开发过程中也确实不太关注 oldValue 的值。 但是如果你一定想要监听的话建议把对象拆成单个 ref 或者把你需要监听的对象中的某个属性单独拆成一个 ref例如上面的例子中我现摘指向单独监听 age那我就不把age 塞到 person 对象里面了单独拎出来使用 ref定义。 let person ref({name: al, });let age ref(28)watch(age.value, (newValue, oldValue) {console.log(age的值变化了, newValue, oldValue); }); 如果你觉得 reactive 可以解决这个问题你也不妨试一试通过 reactive 定义的响应式数据能否达到你想要的效果。 关于 reactive 和 ref 的原理及对比请参考之前的博文 – Vue2与Vue3响应式原理对比 里面通过源码详细解释了 ref 和 reactive 定义对象数据的底层关系 情况五深度监听 ref 定义的对象形式的响应式数据 – 默认开启 deeptrue。监听整个对象。可通过配置关闭( 但是在 Vue3.2之前的版本好像是不能进行配置更改的 ) 其实我们按照上面的例子将数据嵌套多几层然后改变数据 let person ref({name: al,age: 28,job:{j1: {work: 前端,salary:1}} });watch(person.value, (newValue, oldValue) {console.log(person.salary的值变化了, newValue, oldValue); }); 然后改变数据 templatep{{ person.job.j1.work }}/pp{{ person.job.j1.salary }}/pbutton clickperson.job.j1.salary涨薪/button /template 我们可以发现此时 深度嵌套的值也能被监听到。但是 在 Vue2 中监听深度嵌套数据时我们是需要配置 deep:true  才能实现的 但是在 Vue3 中不用开启 deeptrue 就可以直接实现深度监听了。 所以我们可以大胆假设在 Vue3 中deeptrue 是默认开启的如果我们进行配置关闭那会有什么结果呢 watch(person.value, (newValue, oldValue) {console.log(person.salary的值变化了, newValue, oldValue); },{deep:false}); // 关闭深度监听 关闭之后我们可以发现无法监听到深度嵌套数据的改变了。 但是有一个问题需要说明因为我的 Vue  版本是 vue: ^3.2.13 所以看起来配置 是生效的。但是如果好像是3.2以下的版本这个配置是不生效的只能默认开启 deeptrue。 情况六监听 ref 定义的对象形式的响应式数据 – 只监听嵌套对象中的某个基础属性 templatep工作{{ person.age }}/pbutton clickperson.age改变年龄/button /templatelet person ref({name: al,age: 28, });watch(person.value.age, (newValue, oldValue) {console.log(person.age改变了, newValue, oldValue); }); 但是点击按钮之后我们发现 控制台上并没有打印出数据按理来说这是肯定不可能的Vue肯定会放开这个口子供开发者使用所以我们需要从使用语法中查找问题。 // 之前watch 的第一个参数要么是 变量要么是数组。 // 但是在这里我们需要使用一个函数通过函数的返回值来表明我们需要监听对象中的那个属性 watch(() person.value.age, (newValue, oldValue) {console.log(person.age改变了, newValue, oldValue); }); 然后我们就会发现控制台上已经可以正常打印正确数据了。 情况七监听 ref 定义的对象形式的响应式数据 – 只监听嵌套对象中的某些属性 按照情况二和情况七的结合我们可以大致上了解监听嵌套对象中的某些属性应该怎么做。 // 通过 数组模式和函数返回模式相结合实现了监听对象中某些属性 watch([() person.value.name,() person.value.age], (newValue, oldValue) {console.log(name或age改变了, newValue, oldValue); }); 情况八监听 ref定义的对象形式的响应式数据 – 深度监听嵌套对象中的值为复杂类型数据的属性 之前的几种监听情况大致上可以分为 监听 ref 定义的基础类型数据监听 ref 定义的对象类型数据 – 监听的是整个对象( 包括深度嵌套对象 )监听的是对象( 包括深度嵌套对象 )中的某个属性 – 基础类型属性监听的是对象( 包括深度嵌套对象 )中的某几个属性 – 都是基础类型属性 如果我们现在监听的是 深度嵌套对象中某个值为复杂类型数据的属性时那需要怎么做呢 我们还是用之前的数据来进行测试 let person ref({name:al,job:{j1: {work: 前端,salary:1}} }); 然后我们按照 情况六的模式来进行监听 templatep工作{{ person.job.j1.salary }}/pbutton clickperson.job.j1.salary涨薪/button /template// 监听属性通过函数返回 watch(() person.value.job, (newValue, oldValue) {console.log(job中的数据该变了, newValue, oldValue); }); 发现此时并没有监听成功。按理来说这也不应该啊我是按照之前的情况实现的啊只不过是把监听的数据类型该变了怎么就不行了呢 此时我们回忆一下在我们监听完整的对象时默认开启 deep:true 。但我们监听的是整个对象而不是对象中的某个属性。 如果我们监听的是对象中的某个对象属性时这一套就不适用了所以我们需要手动配置 deep:true watch(() person.value.job, (newValue, oldValue) {console.log(name或age改变了, newValue, oldValue); },{deep: true}); 此时改变  salary 后控制台上能打印出数据表atch功 watch 监听 ref 与 reactive 定义的数据使用方式区别 在之前的例子中我们定义数据都是使用的 ref 虽然我有说 ref 定义的对象类型实际上底层还是通过 reactive 来实现响应式但在 watch 监听时使用方式还是存在区别的。 分别用 ref 和 reactive 定义深层嵌套的响应式数据 let person1 ref({job: {j1: {work: 前端,salary: 1,},}, });let person2 reactive({job: {j2: {work: 后端,salary: 2,},}, }); 然后使用 watch 分别监听。这里我们就可以看出区别在哪了。 watch(person1.value,(newValue, oldValue) {console.log(j1中salary改变了, newValue, oldValue);}, );watch(person2,(newValue, oldValue) {console.log(j2salary改变了, newValue, oldValue);}, ); ref 定义的数据需要解包而 reactive 定义的数据则可以直接使用。这一点可以在 之前的博文 ref函数与reactive函数的对比 中可以详细了解一下。  这是因为通过 ref 转化的复杂数据是一个 refImpl实例对象其中 value属性的值才是真的响应式数据是通过 reactive 方法中的 Proxy 代理对象实现响应式。这相比 reactive 直接转化就多了一层 refImpl 实例。所以在 js脚本中使用数据时需要 .value 解包。 然后我们参考一下情况八其实对于 ref 定义的深层嵌套对象我们也可以通过手动配置 deep:true 的形式来实现深度监听 watch(person1,(newValue, oldValue) {console.log(j1中salary改变了, newValue, oldValue);},{ deep: true } ); 总结 Vue3 中能够使用 Vue2 的模式来实现 watch监听 动作Vue3 中的 watch 因为是组合式api所以也需要先引入再使用和 computed 一致Vue3 中的 watch 是一个函数接收三个参数                                                                          参数一需要监听的数据参数类型可以是变量数组或函数   参数二监听的回调函数接收两个参数分别代表新值和旧值   参数三一个对象包含复杂监听的配置例如深度监听 ( dep:true )初始化监听( immediate: true )Vue3 中 setup 中的 watch 不需要使用变量接收也不用返回因为 watch 监听是动作而 computed 计算属性最终返回的是值Vue3 的watch 存在几种情况需要注意 通过 ref 定义的简单类型数据可以直接实现监听无bug – 情况一 情况二 情况三通过 ref 或 reactive 定义的复杂类型数据在监听时存在bug 无法正确获得 oldValue – 情况四监听的是完整对象则强制开启深度监听 – 情况五监听的是对象中的某个基础数据类型属性则需要通过函数返回该属性 – 情况六 情况七监听的是对象中的某个值为复杂类型数据的属性则需要通过函数返回且需要手动配置 deeptrue 实现深度监听 – 情况八Vue3 中的watch 在监听 ref 和 reactiv定义的响应式数据时使用方式是存在区别的那就是 ref 定义的数据在使用时是需要解包的而 reactive 则是不需要。