vite创建新项目

1.通过vite来创建项目

npm init vite@latest

2.下载vscode插件Vue Language Features (Volar)和TypeScript Vue Plugin (Volar)，并禁用Vetur,避免冲突

3.配置vue3的模板代码（方便新建），通过VScode的工具栏 → 用户代码片段

{
    "Print to console": {
	"prefix": "vue3",
	"body": [
	    "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script setup lang='ts'>",
            "import { ref, reactive } from 'vue'",
            "</script>",
            "",
            "<style scoped>",
            "</style>"
	],
	"description": "Log output to console"
    }
}

ref

1.ref()与shallowRef()的区别

ref()接受一个内部值，返回一个响应式的、可更改的 ref 对象。如果将一个对象赋值给 ref，那么这个对象将通过 reactive()转为具有深层次响应式的对象。

示例

const count = ref(0) 
console.log(count.value) // 0 
count.value++ 
console.log(count.value) // 1

shallowRef()是浅层的响应式，内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。

示例

const state = shallowRef({ count: 1 }) 

// 不会触发更改 
state.value.count = 2 

// 会触发更改 
state.value = { count: 2 }

ref()与shallowRef()不可以写一块，否则shallowRef()会造成视图的更新

示例

const man=ref({name:'小小'})
const man2=shallowRef({name:'小明'})
const change=()=>{
   man.value.name='小小1'
   man2.value.name='小明1' //man2的视图会更新为 {name：“小明1”}
}

因为ref()在更新的时候会调用triggerRefValue()，这个会把强制更新依赖，即triggerRef()强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。

reactive

reactive()与readonly()

readonly()接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。 注意当使用readonly只读一个reactive对象时，readonly会受reactive更改的影响

示例

let obj = reactive({name:'小小'})
let read = readonly(obj)
const show = () =>{
    obj.name = '小明' // read:{name:'小明'}
}