随笔分类 - VUE
摘要：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
阅读全文
摘要：组件的v-model实现 注意： v-model 只能绑定ref数据。不能绑定reactive响应数据。因为reactive绑定时，无法同步。 方法一：默认绑定 组件test.vue <template> <view><input type="text" :value="modelValue" @i
阅读全文
摘要：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({})
阅读全文
摘要：条件： vue setup 作用：toRef、toRefs用于将reactive内的节点提取出来，同时具有响应式结构。 一、toRef用法： <script setup> import { reactive, toRef, toRefs } from 'vue' var student = reac
阅读全文
摘要：为了方便阅读，我把setup分几个部份提取 <script setup> // 一、导入相关依赖，比如 ref、reactive等 // 二、定义props，即组件接收数据 // 三、定义data，即组件数据 // 四、定义emits，即组件相关事件 // 五、定义methods，即组件方法 //
阅读全文
摘要：重点说明： vue的异步加载组件函数，仅支持在H5端。不支持APP、微信小程序。 APP、微信小程序端可以实现切换组件（非异步加载），代码如下： template: <button @click="loadComp">载入组件 </button> <component :is="myComponen
阅读全文
摘要：在大多数情况下，自定义响应式类型都可以使用methods来实现。 由于没有想到好的应用场景，这里用一个小的案例演示如何使用 customRef 来创建类似 ref功能的函数，代码如下： template： <template> <view style="left:0 ;top:0;width:100
阅读全文
摘要：1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue 选择vue后，编辑器会自动打开一个名字为vue.json的文件 2、复制以下内容到这个文件中：
阅读全文
摘要：一、安装 @vue/cli 更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli 如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉 // 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装 npm unins
阅读全文
摘要：首先自行安装NODE.JS及VUE及NPM。 1、安装VUE CLI: 安装vue cli 3版本见：https://www.cnblogs.com/wm218/p/11130351.html 在vsCode终端内，执行下列代码： 如图: 创建一个VUE项目，执行以下代码： 其中： <templat
阅读全文
浙公网安备 33010602011771号