vue3 ref全家桶(小满zs vue3 笔记六)

tip1: vue3 无响应式数据(控制台数据已经变化,但是页面无刷新)

<template>
<div>认识Ref全家桶</div>
<div>{{ message }}</div>
<button @click="change">改变</button>
</template>
<script setup lang="ts">
let message: string = '无响应式数据' // console.log 打印改变了,但message没有刷新,原因不是响应式
const change = () => {
message = '改变数据'
console.log(message)
}
</script>

tip2: 技巧2 格式化vue3打印结构

原格式(包几层还需要在dep里的_value里取):

优化后的格式: 

tip: 用户代码片段,自动生成模板面板,

{
	"vue3": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"<div>",
			"</div>",
		"</template>",
		"",
		"<script setup lang='ts'>",
		"",
		"</script>",
		"",
		"<style>",
		"",
		"</style>",
			"$2"
		],
		"description": "Log output to console"
	}

}

一. ref, Ref (响应式数据)

二. isRef

三. shallowRef

四. customRef

五. ref源码解析