V3-setup语法糖-ref相关

1.ref 定义响应式数据

//语法糖
import { ref, shallowRef, toRef, toRefs } from 'vue';
const refValue = ref('初始值') // 默认 存钱
refValue.value = '修改值'

// template
// 自动解包
 <p>{{ refValue }}</p>
 //  // ref 另外一个用法 抓取dom
 <div ref='dom'>这家伙是Dom</div>
 // script 部分
 const dom = ref<HTMLElement>() // 实体dom 渲染后可以获取操作
 
 Tip:接收变量名称 与 div 里 ref = ‘dom名称’ 中的dom 名称相同

1.shallowRef 浅层响应（ 手动触发响应：triggerRef(data））

// setup 语法糖
import { ref, isRef, shallowRef, triggerRef, customRef, toRef, toRefs } from 'vue';
const data = shallowRef({
  name: 'lyon'
})
const data2 = ref({
  name: 'lyon'
})
// isRef 判断是否是 响应式数据
// isRef 判断是否是 响应式数据
console.log(isRef(data)); // true
console.log(isRef(data2)); // true
// 操作shallowRef 式
const btnClick = () => {
  data.value.name = 'shallowRef 变身' // 数据发生变化，但页面不会响应式变化 变身失败
  triggerRef(data) // triggerRef 手动触发响应
  // data.value = {  // 变身成功
  // name: '强制变身'
  //}
}

// 操作ref 时
const btnClick = () => {
  data2.valeu.name = 'ref 变身'  // 页面同步变化
}

// 同时操作时 shallowRef 和 ref 时
const btnClick = () => {
  Tip:注意注意注意： 数据发生变化(不建议 shallowRef 和 ref 同步更新)
  
  //Lyon--YY: 应该是响应式数据 触发了虚拟dom 渲染 影响了shallowRef, 跟随渲染
  data.value.name = 'shallowRef 变身' 
  data.value = {  // 变身成功
   name: '强制变身'
  }
  data2.valeu.name = 'ref 变身'  // 页面同步变化
}
// template 
// 不变化
<h1>{{data.name}}</h1> 
// 变化
<h1>{{data2.name}}</h1> 

customRef 自定义ref

// 自定义一个customRef
function LyonRef<T>(value: T) {
  return customRef((track, trigger) => {
    return {
      get(value:T) {
        track() // 收集依赖数据
        return value
      },
      set(newVal) {
        value = newVal
        trigger() // 触发依赖数据响应
      }
    }
  })
}
// 使用痛ref 
const lyonRef = LyonRef<string>('customRef')
lyonRef.value = 'xxxx'