c盘清理的步骤是什么(如何清理C盘空间)
如何清理C盘空间怎么清理C盘的垃圾文件?每天上网会给电脑带来很多临时文件,这些垃圾文件不清理掉时间久了就会影响到电脑的运行速度。那怎
2022/12/08
(相关资料图)
vue3.0 使用组合式api
,使用的地方在setup回调函数中,这个回调函数是创建组件之前执行,由于在执行 setup 时尚未创建组件实例,因此在 setup 选项中没有 this。这意味着,除了 props 之外,你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。
在模板中解析会自动解开,直接使用。({{msg}}
);但是在js中必须(msg.value)
reactive: 响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中,返回的代理是不等于原始对象。建议只使用响应式代理,避免依赖原始对象对对象进行结构赋值会让对对象每一个属性失去响应式,所有在es6解构赋值前,可以通过toRefs方法包装
toRefs: 将对象每个属性有具有响应式属性,并且带有ref特性;访问方式不同。可以解构赋值不影响数据的响应式readonly: 有时我们想跟踪响应式对象 (ref 或 reactive) 的变化,但我们也希望防止在应用程序的某个位置更改它。例如,当我们有一个被 provide 的响应式对象时,我们不想让它在注入的时候被改变。为此,我们可以基于原始对象创建一个只读的 Proxy 对象ref/reactive/toRefs 数据区别:import { reactive, readonly } from "vue" const original = reactive({ count: 0 }) const copy = readonly(original) // 在copy上转换original 会触发侦听器依赖 original.count++ // 转换copy 将导失败并导致警告 copy.count++ // 警告: "Set operation on key "count" failed: target is readonly.vue2.0 选项式api
data() { return { msg: "初始化" } }, methods: { changeHandle() { this.msg = "改变的" } },vue3.0 组合式api
setup() { let msg = ref("初始化");//string number let person = reactive({name:"lisi",age:20})// object array const changeHandle = () => { msg.value = "改变的" } const changeHandle2 = () => { person.age = 30 } return { msg, changeHandle, changeHandle2 } },watch使用vue2.0 选项式api
watch: { //普通的 msg:{ handler(newValue,oldValue) { console.log("....") } }, //深度 person:{ handler(newValue,oldValue) { }, immediate:true, deep:true }},
*vue3.0 组合式api
setup() { let msg = ref("初始化");//string number let person = reactive({name:"lisi",age:20})// object array watch(msg,(newValue,oldValue)=>{ console.log(this);//undefined;箭头函数绑定父级作用域的上下文,所以this不会指向当前的组件 console.log(newValue,oldValue); },{deep:false,immediate:false}) watch(() => person.age,(newValue,oldValue) => { console.log(newValue,oldValue) }) return { msg } },computed使用vue2.0 可以参考之前文章computed深入
computed:{ //无参数 filterMsg() { return this.msg + "999" }, //有参数 filterMsg2(number) { return function() { return this.msg + number; } }, // 自定义set方法 filterMsg3: { get() { return this.msg + "999" }, set(value) { ... } } }vue3.0
//无参数 const filterMsg =computed( () => msg.value + "fdfasdf") //有参数 const filterMsg2 =computed(() => { return function(num) { return msg.value + num } }) // 自定义set方法和get方法 const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0
在了解组件通信之前,我们先要深入了解setup,render方法,this,。
注意:
但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。 我们可以通过 toRefs方法完成可以解构赋值,且不影响属性的响应式
import { toRefs } from "vue" setup(props) { const { title } = toRefs(props) console.log(title.value) }context 上下文传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象,它暴露三个组件的 property:
// MyBook.vue export default { setup(props, { attrs, slots, emit }) { ... } }
setup() { const num = ref(100);//添加包装引用对象 const person = reactive({name:"lisi",age:20});//本身就是响应式对象 const person2 = toRefs(person);//对对象每一个属性添加包装引用 console.log(person2) return () => h("div", [num.value,person.name,person2.age.value]) }