随笔分类 - uni-app
摘要：绑定style样式对应HTML 元素的 style 属性，比如要设置字段大小： <div :style="{fontSize: '2rem'}">你好，中国！</div> 样式名称建议采用驼峰写法，但是也可以用 kebab-cased 的形式，比如上例中，也可以写成： <div :style="{'
阅读全文
摘要：Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。 形态一：常规形态 <template> <div :class="className"></div> </template> <script setup> const className = 'text-pri
阅读全文
摘要：nextTick() 响应式数据变化之后，并不是立刻同步更新DOM视图。nextTick()函数可以取响应式数据变化之后的视图。 nextTick(callback) @说明：响应式数据变化后，等待其更新视图。这样就能获取最新的DOM内容 @参数： callback [可选] 回调函数 @返回：无
阅读全文
摘要：onActivated()、onDeactivated() 当组件被<KeepAlive>组件缓存时，会触发这二个生命周期。 比如: <KeepAlive><test></test></KeepAlive> ，此时test组件具有这二个生命周期 这二个生命周期。执行顺序依次： onActivated
阅读全文
摘要：onBeforeUpdate()、onUpdated() 这二个生命周期。执行顺序依次： onBeforeUpdate() 》 onUpdated() 使用前需要被引入： import { onBeforeUpdate, onUpdated } from 'vue' onBeforeUpdate()
阅读全文
摘要：onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 这四个生命周期分别应在组件的挂载、卸载时触发。执行顺序依次： onBeforeMount() 》 onMounted() 》 onBeforeUnmount() 》 onUnmo
阅读全文
摘要：effectScope() 官方解释：创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。 个人理解：叫它 侦听管家 更形象。 通俗的说，它可以把计算属性、监听器放在一个函数内管理，然后统一停止监听。 代码示例： // 定义侦听管
阅读全文
摘要：shallowReadonly() 说明：浅层次只读。其第二层及其以下可读写。 const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 更改状态自身的属性会失败 state.foo++ // ...但可以更改下层嵌套对象 is
阅读全文
摘要：isRef() @说明：判断值是否是ref类型 @返回：[boolean] <script setup> import { ref, isRef } from 'vue' const studentNumber = ref(40) // 班里学生数 console.log(isRef(student
阅读全文
摘要：computed() computed()计算属性。在setup内该函数返回ref类型，所以也是要求用.value取值，赋值。但在模板中可以自动解勾。 computed与methods的区别在于：computed它是有缓存的，即无论访问多少次，只要其依赖的数据没有变化，其结果都是从缓存中获取，不是重
阅读全文
摘要：watch() 函数原型： @原型：watch( param, callback, options) @params: param: [必需] 被监听对象 callback: [必需] 被监听对象发生变化时执行回调 callback: function(newValue, oldValue) { /
阅读全文
摘要：toRaw(<Object>) 说明：返回响应式对象原始对象 代码说明： const foo = {} // 这是原始对象 const reactiveFoo = reactive(foo) // reactiveFoo 是响应式对象，foo是原始对象 console.log(toRaw(react
阅读全文
摘要：markRaw(<Object>) 说明：将一个对象标记为不可被转为代理。返回该对象本身。 通俗的说，将一对象设置成不能转换成ref或reactive等响应式对象。比如代码： const foo = markRaw({}) //声明变量foo是不能变成响应式 console.log(isReacti
阅读全文
摘要：triggerRef() 手动更新shallowRef()变量的视图。 代码如下： <template> <h1>{{ state }}</h1> <!-- 这是视图 --> <button @click="change">更新count属性值后，手动更新视图</button> </template
阅读全文
摘要：shallowReactive() shallowReactive() 也是浅层响应视图。 1、对第一层属性值的修改，会更新到视图层。 2、对除第一层之外的属性值修改，可以改值，但是无法更新到视图层。 3、shallowReactive()无法手动更新视图层，因为没有提供类似triggerRef（）
阅读全文
摘要：shallowRef() shallowRef()存在的意义：将最终的结果输出到视图，节省一些不必要的输出。 shallowRef()需要理解的： shallowRef是浅层响应式数据，即：修改.value值时会更新视图。而修改具体属性值时，不会更新视图。 比如： // 定义shallowRef变量
阅读全文
摘要：readonly() 说明： 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。 细节：它是深层的。即不管原值是多少子节点、孙节点，都是只读。 用途：保护某些数据不让它意外的被修改。 示例： const original = reactive({ count: 0
阅读全文
摘要：reactive() ： 定义响应式变量，仅支持对象、数组、Map、Set等集合类型有效。对String、number、boolean、等原始类型无效 1、使用前必需引入 reactive <script setup> import { reactive } from 'vue' </script>
阅读全文
摘要：ref() ： 定义响应式变量，它可以定义任意类型 1、使用前必需引入 ref <script setup> import { ref } from 'vue' </script> 2、定义语法： const a= ref(0)const b = ref(null)const c = ref({})
阅读全文
摘要：一、定义：二维数组键值对 的形式 const person = new Map([ ['name', '秋風落葉'], ['age', 27], ['sex', '男'] ]) 二、赋值：OBJ.set(键名, 键值) const person = new Map() person.set('nam
阅读全文
浙公网安备 33010602011771号