vue3的基本使用
vue3的基础使用;
安装vite：npm inistall -g create-vite-app
利用vite创建vue3项目：create-vite-app projectName
安装依赖运行项目：cd projectName npm install npm run dev
文档地址：https://v3.vuejs.org/guide/introduction.html
composition API的本质其实就是把setup()中的方法和数据注册到data/methods中;
ref定义简单类型的数据， reactive定义复杂类型的数据;
vue3基本使用方式
import {ref , reactive} from 'vue' // reactive只有传入复杂类型(json/arr)才会成为响应式
export default {
name: 'App',
// setup函数是组合api的入口函数
// 执行时机在beforeCreate之前，所以此时是无法使用data/methods
// 由于不能在setup不能访问data/methods，此时的this的值为undefined
// setup只能是同步的
setup () {
let {state, deleteLine} = diyFun()
let count = ref(0)
return {state, deleteLine, count} // 暴露出去之后就可以使用这些变量了
}
}
function diyFun() {
let state = reactive({
stus: [
{id: 1, name: 2, age: 3},
{id: 2, name: 3, age: 4},
{id: 3, name: 4, age: 5},
{id: 4, name: 5, age: 6}
]
})
function deleteLine(index) {
console.log(index)
state.stus.splice(index, 1)
}
return {state, deleteLine}
}
reactive注意点:
reactive传递的参数必须是object/arr
如果传递了其他的对象，默认情况下修改对象，界面不会自动更新，如果想要
更新，可以通过重新赋值的方式
// 重新赋值
function changeTime() {
let stateDate = reactive({
time: new Date()
})
function changeDetail() {
let data = new Date(stateDate.time.getTime())
data.setDate(stateDate.time.getDate() + 1)
stateDate.time = data
}
return {stateDate, changeDetail}
}
ref的本质其实还是reactive，当我们给ref函数传递一个值之后，ref
函数会自动的转化成{value: xx}，只是中间自动帮我们套了一层value
const name = ref(1) => name: {value: 1}
所以当我们修改值时，name.value = ‘xxx',此时才能进行响应式更新.
同理： shallowRef本质上也是shallowReactive
递归监听（通过ref和reactive来创建得数据）
在多层嵌套得对象中，vue3会递归每一层对象，并对每一层对象创建一个proxy进行监听，所以非常消耗性能,
let obj = reactive({
a: {
b: 'v',
c: {
d: '666',
e: {
f: '7777'
}
}
}
})
非递归监听 shallowReactive shallowRef, 只会监听最外一层
修改， 单独修改obj.a.b是不会重新渲染得，因为是没有被proxy监听得，
只有同时修改了obj得第一层属性值才会重新渲染，只有obj被proxy监听了
let obj = shallowReactive({
name: '11111',
a: {
b: 'v',
c: {
d: '666',
e: {
f: '7777'
}
}
}
})
// 修改， 单独修改obj.a.b是不会重新渲染得，因为是没有被proxy监听得，
// 只有同时修改了obj得第一层属性值才会重新渲染，只有obj被proxy监听了
obj.name = 'zhangsan'
obj.a.b = '7777777'
通过shallowRef创建得数据，监听得是obj.value得值，修改方式如下，将整个对象提出来修改
如果只想单独修改一个值， 配合triggerRef(obj)使用，此时会重新渲染界面
注意：没有triggerReactive()方法
obj.value = {
name: 'asdasdasd',
a: {
b: 'asdasdasd',
c: {
d: '66132126',
e: {
f: '7123123777'
}
}
}
}
// 如果只想单独修改一个值， 配合triggerRef(obj)使用，此时会重新渲染界面
// 注意：没有triggerReactive()方法
obj.value.name = 'asdasdasd123123'
triggerRef(obj)
toRaw方法，在有些情况下，我们修改了reactive/ref中得数据得时候，并不希望他去更新UI
但是他本身是响应式得，此时可以使用toRaw来避免这种更新达到提升性能得作用
reactive创建得数据
let obj2 = toRaw(obj)
obj2.name = '123123123123' // 此时obj中proxy代理得值也发生变化了，但是界面没有更新
// ref创建得数据想使用toRow得话
let obj2 = toRaw(obj.value) // 因为ref本质还是reactive
obj2.name = '123123123123'
markRow 使某个值永远不会响应式
let obj = {a: 1, b: 2}
obj = markRow(obj)
let state = reactive(obj) //此时state的值再发生修改就不会重新渲染了
toRef和ref定义数据
let obj = {a: 1, b: 2}
let state = ref(obj.a)
let state = toRef(obj, name)
/*
此时修改state.value的值。obj中对应的a的值不会更改，但是UI会自动更新
如果使用的是toRef，在修改了数据之后，obj的值会跟着变化，但是UI不会更新
*/
也可以使用toRefs
let state = toRefs(obj) // 直接遍历obj中所有的属性，作用和toRef差不多，修改原始数据
vue3中使用生命周期函数和获取dom得方式
使用生命周期->引入对应得生命周期函数，在setup中使用onMounted()
// <div ref="box"> 123123123</div>
let box = ref(null) // 定义一个空的ref数据，将该数据暴露出去给节点绑上ref值
onMounted(() => {
console.log(box.value) // 即可拿到节点对象
})
return {box}
readonly:创建一个只读的数据，并且是递归只读
let state = readonly({name: 1, attr: {a:1, b: 2})
shallowReadonly：用于创建一个只读的数据，但不是递归只读的，只能用于第一层
isReadonly()用于判断该值是不是只读的
