1、reactive
const obj = reactive({ count: 0 })
obj.count++
2、
ref 解包 就是不用拿value访问 而直接用对象本身 会自动解包成value
只有顶级的属性会被解包
对象里的ref 可以用解构的方式让它变成顶级属性
const object = {id:ref(0)} {{object+1}} 不会被解包
const { id } = object {{ id +1 }} 会被解包
疑问:解包只会在{{}}里面使用吗? (不知道)
reactive 解包所有嵌套的属性
当包裹的是ref元素集合或者map集合时 将不会解构
const count = ref(0)
const r1 = reactive({count})
console.log(r1.count) //0
这样相当于用value
计算属性:用computed computed(()=>{
})
计算属性值会基于其响应式依赖被缓存
一个计算属性仅会在其响应式依赖更新时才重新计算。
而方法在页面每次重新渲染时候会被重新调用
全部变量:
新建一个main.scss
在里面用$+变量的属性 即可将这个样式变量加入
要符合命名规范:在某个组件里面用组件的名称+变量样式的属性名来命名变量
使用的时候不能用style变量这样整体使用,而是用一个变化的类来使用。
用:class来绑定,并且要计算属性来返回样式进行注册? 样式名称后面放:
vue3的监听事件的写法
watch(
() => store.isOpenAir,
(newValue) => {
if (newValue) {
// console.log("store.isOpenAir更改为",newValue)
bottom8.value = 0
console.log(bottom8.value)
}
},
{immediate: true}
)