响应式变量

1.定义简单类型数据 用 ref

    const num = ref(100)

2.定义复杂类型用 reactive

const list = reactive(['hhh', 'lll', 'ssss'])

3.防止篡改 添加只读属性readonly

 return {
        box, 
        num,
        list: readonly(list),  //暴露出去只读
        add: readonly(add), ///暴露出去只读
        addObj
    }                 

4. 判断是否为ref 对象 isRef

const num = ref(tab)
console.log(isRef((num)))  //true

5.ref 获取dom元素

// 绑定ref属性

 <div ref="box" class="box"></div>

//定义一个null

 const box = ref(null)

//然后生命周期函数mounted里面修改

 onMounted(() => {
    box.value.style.background = 'blue'
 })