数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、ref()

ref() 方法接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。

若要避免这种深层次的转换，请使用 shallowRef() 来替代。

 import { ref } from 'vue'   // 声明基本数据类型的数据  // 定义一个非响应式的数据，此数据只能在数据层进行修改，视图层不会同步更新  let num = 1;  console.log("num:", num)  num = 100;  console.log("num:", num)  setTimeout(() => {  num = 1000  console.log("num:", num)  }, 5000)   // 利用 ref 定义一个响应式数据：数据层数据的修改可以相应到视图层，反之亦可  let str = ref("Hello Ref!!")  console.log("str:", str, str.value)  setTimeout(() => {  str.value = "Hello 我是响应式数据！！！"  console.log(str.value)  }, 8000);// 更新时间在非响应式数据之后，会影响后者；在非响应式数据之前更新，则不会影响后者  // 需要注意的是：非响应式的数据更改后不会更新视图，但是如果非响应式数据更新后，去更新响应式数据，那么更新后的非响应式数据也会受响应式数据更新的影响，视图层响应会重新匹配最新的数据进行更新（响应式和非响应式数据）   // 利用 ref 定义一个复杂的数据类型  let obj = ref({  name: "Jack",  age: 23,  sex: "男"  })  console.log("obj:", obj)  setTimeout(() => {  // obj.value = {}  obj.value.name = "Lucy"  obj.value.sex = "女"  },3000)  " _ue_custom_node_="true">   { { num }} { { str }}   { { item }} ~ { { key }}

ref 接受的数据类型：基本类型，引用类型。

作用：把参数加工成一个响应式对象，全称为reference对象(简称为ref对象) 。

核心原理：如果参数是基本类型那么形成响应式依赖于Object.defineProperty( )的get( )和set( )，如果ref的参数是引用类型，底层ref会借助reactive的proxy 定义响应式变成这样：reactive({value:‘xiaxia’})。

二、shallowRef()

shallowRef() 方法是ref() 的浅层作用形式

和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。

shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。

  
 
TheShallowRef页面数据： 
 
{ { item }}  
{ { data }} 
{ { data2 }} 第一层（.value）数据更新 
  第二层（.value.stu）数据更新 
  第三层（.value.stu.hobby）数据更新  

注：shallowRef 与 ref 不能一起使用，不然 ref 的变化会影响 shallowRef 造成视图的更新

三、 triggerRef()

triggerRef() 强制触发依赖于一个浅层 ref (shallowRef) 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

import { ref, shallowRef, triggerRef } from 'vue'  const refData = ref({  foo: {  bar: {  num: 10  }  } })  const swRefData = shallowRef({  stu: {  name: {  firstname: "弗拉基米尔",  centername: "",  lastname: "普京"  }  } })  const change = () => {  console.log("triggerRef...")  swRefData.value.stu = {  name: "张三丰",  age: 23  }  // refData.value.foo.bar.num = 1000   // 触发 shallowRef 数据的更新  triggerRef(swRefData)  console.log(swRefData) } " _ue_custom_node_="true">  { { refData }} { { swRefData }} 更改数据

四、customRef()

customRef() 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象（手动收集依赖并派发更新）。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。

可以用于创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用

 import { customRef, ref } from 'vue'   const refData = ref("呵呵！")   // 可以通过自定义 ref 实现防抖操作  const myRef = (value, delay = 500) => {  let timer;  return customRef((track, trigger) => {  return {  get() {  track();//收集相关依赖  return value;  },  set(newVal) {  clearTimeout(timer)  timer = setTimeout(() => {  console.log(newVal)  trigger();//触发相关的依赖  value = newVal;  }, delay)  }  }  })  }  let result = myRef("Hello customRef!!")  // let result = myRef({  // foo: {  // bar: {  // num: 1  // }  // }  // })  console.log("customRef中的数据result:", result)  let count = 1;  const change = () => {  // customRef 防抖处理后，指定时间内连续触发，数据不会发生更改。  result.value = "Hello 我是更新后的数据！！！" + count++  // result.value.foo.bar.num = 1000   // refData.value = "哈哈，我会影响customRef深层数据的更新！"  console.log("customRef中的数据result:", result.value)  } " _ue_custom_node_="true">  customRef数据演示 { { result }} { { refData }} 更新数据

五、isRef()

isRef() 方法用于检查某个值是否为 ref

import { ref, isRef, unref } from 'vue'  const str = "Hello World!" const refStr = ref("Hello Ref Data!")  // isRef() 方法用于检查某个值是否为 ref console.log("isRef检测：", isRef(str));//isRef检测： false console.log("isRef检测：", isRef(refStr));//isRef检测： true

六、unref()

unref() 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

import { ref, isRef, unref } from 'vue'  const str = "Hello World!" const refStr = ref("Hello Ref Data!")  // unref() 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。 const strResult = unref(str); const refStrResult = unref(refStr); console.log("strResult:", strResult, "refStrResult:", refStrResult);//strResult: Hello World! refStrResult: Hello Ref Data!

七、ref 用于获取 DOM 元素

 import { ref, onMounted } from 'vue'   // 页面所有的同步组件完成挂载的声明周期钩子  onMounted(() => {  console.log("moutend钩子：所有的同步组件完成挂载完成...")  })  // mouted 生命周期钩子，在 setup 入口函数后执行   // setup 模式下（钩子函数）执行时，页面还没有渲染，所以此时是拿不到元素的  // 原生的方式获取元素：document.getXXX 系列（四个） document.queryXXX系列（两个）  const divELe = document.querySelector(".wrapper")  console.log('setup钩子期间获取元素：', divELe);   // Vue 提供了 ref 的方式来获取相关的元素  let wrapper = ref()  console.log(wrapper)  console.log(wrapper.value)   // 异步函数中获取元素：这个时候元素已经渲染完成，可以获取到  const getEle = () => {  const divELe = document.querySelector(".wrapper")  console.log(divELe);   console.log(wrapper.value)  } " _ue_custom_node_="true">  演示通过ref的方式，获取Vue模板中的元素！！ 获取wrpper