Vue
文章平均质量分 61
Vue
明阳不明白
成长的历程就是不断的蜕变,只有敢于接受蜕变的人,才能够化茧成蝶。
展开
-
Vue3理解(9)
6.watch和watchEffect都能响应地执行有副作用的回调,它们之间主要是追踪响应式依赖的方式,watch只追踪明确的数据源,它不会追踪任何在回调中访问到的东西,另外,仅在数据源确实改变才会触发,watch会避免在发生副作用时追踪依赖因此,我们能更准确地控制回调函数的触发时机,watchEffect则会在副作用发生期间追踪依赖,它会在同时执行过程中,自动追踪所有能访问到的响应式属性,这更方便,而且代码往往更简洁,使得响应式依赖关系会不那么明确。原创 2023-10-11 16:25:57 · 591 阅读 · 4 评论 -
Vue3理解(8)
注册一个钩子在捕获了后代组件传递错误时调用,错误捕获来源,组件渲染,事件处理器,生命周期钩子,setup()函数,侦听器,自定义指令钩子,过渡钩子,这个钩子函数带有三个实参,错误对象,触发该错误的组件实例,以及一个说明错误来源的信息字符串,你可以在errorCaptured()中更改组件为用户显示的一个错误,这个钩子可以通过返回false阻止错误继续向上传递。注册一个钩子在组件被挂载之前调用,这个钩子被调用时组件已经完成所有响应,但是还没有创建DOM节点,它即首次执行DOM渲染过程。原创 2023-09-28 10:13:42 · 580 阅读 · 1 评论 -
Vue3理解(7)
5.在处理事件得事件得时候可以直接调用内部方法,Vue为v-on提供了事件修饰符,修饰符用.得指令后缀,包含.stop,.prevent,.self,.capture,.once,.passive,stop单机事件停止传递,prevent提交事件不再重新加载页面,capture是指向内部元素在被内部元素处理前先被外部处理,once点击事件最多被触发一次,在使用修饰符得时候要注意修饰符得顺序。7.系统按键修饰符.ctrl,.alt,.shift,.meta。原创 2023-09-27 19:46:42 · 849 阅读 · 4 评论 -
Vue3理解(6)
6.v-for和v-if同时使用是不推荐的,这二者优先级不明显,当它们同时出现在一个节点上v-if比v-for优先级高,这也就意味着v-if的条件将无法访问到v-for定义的变量别名,如果要解决这个问题可以在外层套上一层标签将v-for写在标签上这样就解决这个问题了。1.v-for指令基于一个数组来渲染列表,v-for指令的值需要使用 item in items形式的特殊语法,items是源数据的数组,而item是迭代项的别名。原创 2023-09-27 11:23:44 · 655 阅读 · 1 评论 -
Vue3理解(5)
2.v-else 指令你可以使用v-else为v-if添加一个else区块当v-if为false显示v-else,当v-if为true时v-else的内容隐藏,一个v-else元素必须跟在v-if或v-else-if指令后面否则将不会被识别。3.v-else-if 指令指的是可以在相对于v-if的else if区块可以连续多次使用,和v-else类似一个v-else-if必须跟在一个v-if或者v-else-if元素后面。1.v-if 指令用于条件渲染,一块内容只会在表达式的值为真值时才会被渲染。原创 2023-09-26 21:52:46 · 390 阅读 · 1 评论 -
Vue3理解(4)
2.因此我们可以使用计算属性来描述响应式状态的复杂逻辑,返回值是一个计算属性ref,和其他ref类似,计算属性ref也会在模板中自动解包因此在表达式中不需要加.value。3.为什么使用计算属性而不是方法,是因为计算属性的值会基于响应式依赖被缓存,计算属性仅会在依赖更新时才会重新计算,只要依赖项不改变就重复复用该依赖项。4.计算属性默认只读,当你尝试修改一个计算属性时,会收到一个运行警告,你想要可写的属性,你可以通过getter和setter来创建。原创 2023-09-26 17:02:13 · 491 阅读 · 1 评论 -
Vue3理解(3)
当你修改了响应式状态时,DOM会被自动更新,但是需要注意DOM更新不是同步的,Vue会在 ‘next tick’更新周期中缓冲所有状态的修改,来确保不管你进行几次状态的修改,每个组件只会被更新一次。reactive() 将深层地转换对象,当访问嵌套对象时,它会被reactive() 包装,当ref值是一个对象时,ref()也会内部调用它。只有代理对象是响应式的,更改原始对象不会触发更新,因此使用Vue响应式系统的最佳实践是 仅使用你声明对象的代理版本。当其作为浅层响应式对象的属性被访问不会解包。原创 2023-09-15 20:15:00 · 733 阅读 · 4 评论 -
Vue3理解(2)
Vue使用一种基于HTML的模板语法 使我们能够将数据绑定到DOM上,在底层Vue会将模板编辑高度优化的javaScript代码,结合响应式系统,当应用状态变更时,Vue可以重新渲染组件的最少数量,并应用最少的DOM操作。最基本的数据绑定形式是文本插值,使用{{}}双大括号,双大括号标签会被替换成组件实例中的属性值,数据发生变化属性值也会同步更新。在网站上渲染任意HTML是非常危险的,容易造成XSS漏洞,在使用v-html的时候永远不要使用用户提供的HTML内容。指令以v-为前缀表示它是由Vue提供的。原创 2023-09-12 10:11:05 · 319 阅读 · 1 评论 -
Vue3理解(1)
组合式API,我们可以使用导入的API函数来描述组件逻辑,在单文件组件中,组合式API通常与搭配使用,使用setup告诉Vue在编译的时候进行处理,让我们更简洁的使用组合式API。选项式API,就是需要把代码规范化,例如data定义,methods写方法,computed写方法等,选项所定义的属性都会暴露到函数内部的this上它会指向当前组件的实例。的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。选项式 API 是在组合式 API 的基础上实现的!原创 2023-09-11 19:29:04 · 507 阅读 · 4 评论 -
computed计算属性
computed计算属性依赖于他的属性变化而变化 也就是依赖于data中的属性 只要依赖的data发生变化 就会触发调用一次计算属性。原创 2023-08-04 18:30:00 · 3508 阅读 · 2 评论