Vue3一些知识

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}
)