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: 用户代码片段,自动生成模板面板,
1. 设置模板 vscode 最下面齿轮设置图标->用户代码片段->输入vue.json来设置模板,如下:
{
"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源码解析