自己做的网站怎么放图片,商丘网站建设价格,论坛网站怎么建设,第一接单网app1. 组合API-setup函数 使用细节#xff1a;
setup 是一个新的组件选项#xff0c;作为组件中使用组合API的起点。从组件生命周期来看#xff0c;它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例#xff0c;this 此时是…1. 组合API-setup函数 使用细节
setup 是一个新的组件选项作为组件中使用组合API的起点。从组件生命周期来看它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例this 此时是 undefined在模版中需要使用的数据和函数需要在 setup 返回return。 2. 生命周期
2.1 回顾vue2.x生命周期钩子函数
beforeCreatecreated——实例创建能获取data 不能获取真实DOM一般用于发起Ajax请求beforeMountmounted——可以获取真实DOMbeforeUpdateupdated——当数据发生变化并更新页面后执行获取更新后的DOMbeforeDestroydestroyed——手动消除计时器/定时器/全局事件
2.2 认识vue3.0生命周期钩子函数
setup 创建实例前onBeforeMount 挂载DOM前onMounted 挂载DOM后onBeforeUpdate 更新组件前onUpdated 更新组件后onBeforeUnmount 卸载销毁前onUnmounted 卸载销毁后 总结 组合API的生命周期钩子有7个可以多次使用同一个钩子执行顺序和书写顺序相同。
3. ref() 函数
作用接收简单类型或者对象类型的数据传入并返回一个响应式的对象RefImpl
定义响应式数据
ref函数常用于简单数据类型定义为响应式数据 再修改值获取值的时候需要.value在模板中使用ref申明的响应式数据可以省略.value
语法 从 vue 包中导入 ref 函数 import { ref } from vue 在 setup 中执行 ref 函数并传入初始值使用变量接收 ref 函数的返回值 使用场景
当你明确知道需要的是一个响应式数据对象那么就使用 reactive 即可其他情况使用ref
4. reactive() 函数
作用接受对象类型数据的参数传入并返回一个响应式的对象。响应式对象是 JavaScript 代理其行为就和普通对象一样。Proxyreactive() 返回的是一个原始对象的 Proxy它和原始对象是不相等的。 定义响应式数据 reactive是一个函数它可以定义一个复杂数据类型成为响应式数据。通常是用来定义响应式对象数据
语法 从 vue 包中导入 ref 函数 import { reactive } from vue 在 setup 中执行 reactive 函数并传入初始值使用变量接收 reactive 函数的返回值 5. ref()与reactive()函数的理解 reactive和ref函数的共同作用是什么 用函数调用的方式生成响应式数据 reactive vs ref reactive不能处理简单类型的数据 ref参数类型支持更好但是必须通过.value访问修改 ref函数的内部实现依赖于reactive函数 在实际工作中推荐使用哪个 推荐使用ref函数更加灵活统一 理解 ref 和 reactvie 都是生成响应式数据的方法。ref 可以用于简单类型的数据和复杂类型的数据生成的是响应式对象RefImpl而 reactive 只能用于对象且生成的代理响应式对象Proxy。通过 ref 生成的响应式对象RefImpl.value之后的值其实就是通过 reactive 生成的代理响应式对象Proxy。
推荐以后申明数据统一使用 ref 统一了编码规范
6. toRef() 函数
作用toRef 是函数转换响应式对象中某个属性为单独响应式数据并且值是关联的。 语法 从 vue 包中导入 toRef 函数 import { toRef } from vue toRef (响应式对象, 响应式对象中的某个属性) 使用场景有一个响应式对象数据但是模版中只需要使用其中一项数据。
7. toRefs() 函数
作用toRefs() 是函数转换响应式对象中所有属性为单独响应式数据并且值是关联的。语法 从 vue 包中导入 toRefs 函数 import { toRefs } from vuetoRefs (响应式对象) 8. 案例
基本步骤
记录鼠标坐标 定义一个响应式数据对象包含x和y属性。在组件渲染完毕后监听document的鼠标移动事件指定move函数为事件对应方法在函数中修改坐标在setup返回数据模版中使用累加1功能 定义一个简单数据类型的响应式数据定义一个修改数字的方法在setup返回数据和函数模板中使用
templatedivdiv鼠标的坐标为/divpx:{{ x }}/ppy:{{ y }}/phrdiv{{ count }}/divbutton clickadd 1/button/div
/templatescript
import { onMounted, reactive, onUnmounted, toRefs, ref } from vue
// 功能1记录鼠标坐标
// 定义一个响应式数据对象包含x和y属性。
// 在组件渲染完毕后监听document的鼠标移动事件
// 指定move函数为事件对应方法在函数中修改坐标
// 在setup返回数据模版中使用export default {setup () {// 1. 定义一个响应式数据对象包含x和y属性。const mouse reactive({x: 0,y: 0})// 3. 指定move函数为事件对应方法在函数中修改坐标const move (e) { mouse.x e.pageXmouse.y e.pageY}// 2. 在组件渲染完毕后监听document的鼠标移动事件onMounted(() {document.addEventListener(mousemove,move)})// 4. 组件销毁时移除事件onUnmounted(() {document.removeEventListener(mousemove,move)})// 功能2数字加 1 const count ref(0)const add () {count.value 1}return {...toRefs(mouse),count,add}}
}
/scriptstyle/style
