vue3.0中的toRefs ref reactive
//引入我们的 toRefs ref reactive 方法
import { toRefs, reactive, ref } from 'vue'
export default {
//在vue3.0中 所有的方法常量 变量等等 都会放在setup函数里面
setup(){
/**
* ref 是Vue3中提供实现响应式数据的方法
视图和数据会同步更新 但不会影响源数据
建议用来操作基本数据类型 比如 String Number
*/
//语法↓↓: 需要把我们定义的obj return出去
const obj = ref({id:1,name:'xxx'})
//使用↓↓: 如果视图有渲染obj 视图层的obj.name会变为 "yy" 我们console.log(obj)也会变为"yy"
obj.value.name="yy"
//那么不影响源数据示例↓↓
const num =0
const sum = ref(num) //相当于拷贝了源数据
//sum.value ++
//我们的sum会变 但是我们的num始终是0 不会变 也就是不会影响到源数据
/**
* toRefs 将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象
修改会改变源数据
但并不会改变视图更新
*/
/**
* 语法 const obj ={id:1,name:'张三'}
* const res = toRefs(obj,'name')
* 使用 res.value.name="李四"
* 比如 console.log(obj.name) 会得到李四 但是视图层并不会更新
* 场景 在我们JS中想改变数据 但是又不想视图更新时
*/
/**
* reactive reactive参数必须是对象(json/arr) 否则会报错
也是Vue3中提供实现响应式数据的方法
建议用来操作复杂数据类型 比如 Object Array
* 语法 const state = reactive({
treeList: [],
obj:{a:'ddd',b:'ccc'}
})
* 使用 state.obj 里面就是我们obj的数据
*/
return {
obj
}
}
}
