vue3.0
神奇大叔
这个作者很懒,什么都没留下…
展开
-
vue3.x <script setup>单文件中typescript使用
<script setup lang="ts"> .未指出的地方和使用原生ts一致 1、props (1)运行时声明 .其他格式和选项式中props格式一致 const props = defineProps({ foo: { type: String, required: true }, bar: Number }) (2)通过泛型 const props = defineProps<{ foo: strin原创 2022-03-30 16:43:04 · 939 阅读 · 0 评论 -
vue3.x <script setup>单文件组件
相比普通script模板优点: 更少的样板内容,更简洁的代码。 能够使用纯 Typescript 声明 props 和抛出事件。 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作) 1、使用: 里面的代码会被编译成组件setup()函数的内容,会在每次组件实例被创建的时候执行 与普通的<script>内的setup只在组件被首次引入的时候执行一次不同原创 2022-02-13 15:04:57 · 1110 阅读 · 0 评论 -
vue3.x style特性
只能在 render 或 setup 函数中使用,允许在函数中访问 CSS 模块。(1)使用 <script> import { h, useCssModule } from 'vue' export default { setup() { const style = useCssModule() style中即可访问css中的选择器,可用于动态操作css return () => h( 'div',原创 2022-02-10 16:28:39 · 650 阅读 · 0 评论 -
vue3.0 getCurrentInstance访问内部组件实例
getCurrentInstance支持访问内部组件实例,用于高阶用法或库的开发。使用: setup() { const internalInstance = getCurrentInstance() internalInstance.appContext.config.globalProperties; 访问 globalProperties getCurrentInstance().uid; 访问组件的id }在setup或生命周期钩子外使用,先在s原创 2021-06-01 16:30:55 · 4104 阅读 · 0 评论 -
vue3.0 nextTick
将回调推迟到下一个DOM更新周期之后执行,在更改了一些数据以等待DOM更新后立即使用它。import { createApp, nextTick } from 'vue'方式一: const app = createApp({ setup() { const changeMessage = async newMessage => { ... await nextTick() 会返回一个Promise对象,所以可以使用await,等待nextTick()结原创 2021-05-29 20:37:23 · 20572 阅读 · 1 评论 -
vue3.0 resolveDirective、withDirectives
1、resolveDirective 如果在当前应用实例中可用,则允许通过其名称解析一个directive。 返回一个Directive,如果没有找到,则返回undefined 只能在render或setup函数中使用。 const app = Vue.createApp({}) app.directive('highlight', {}) import { resolveDirective } from 'vue' render () { const highlightDire原创 2021-05-27 21:16:12 · 5146 阅读 · 0 评论 -
vue3.0 defineComponent、resolvComponent等
1、defineComponent 从实现上看:defineComponent只返回传递给它的对象 就类型而言:返回的值有一个合成类型的构造函数,用于手动渲染函数、TSX 和 IDE 工具支持。 export default defineComponent({ ... }) 2、defineAsyncComponent 创建一个只有在需要时才会加载的异步组件。可以接受一个返回Promise的工厂函数 const AsyncComp = defineAsyncComponent(原创 2021-05-27 20:49:22 · 12626 阅读 · 0 评论 -
vue3.0 createApp
返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。1、使用 const app = Vue.createApp({配置对象},{根prop参数})2、链式调用 支持链式调用:https://v3.cn.vuejs.org/api/application-api.html#component3、该方法类型声明 interface Data { [key: string]: unknown } export type CreateAppFunction&原创 2021-05-24 22:25:28 · 7688 阅读 · 0 评论 -
vue3.0 自定义指令
指令是具有一组生命周期的钩子:1、全局指令 import { createApp } from 'vue' const app = createApp({}) app.directive('my-directive', { // 在绑定元素的 attribute 或事件监听器被应用之前调用 created() {}, // 在绑定元素的父组件挂载之前调用 beforeMount(el,binding, vnode,prevNode) { 除了el之外,你应该将这些参原创 2021-05-24 20:23:02 · 896 阅读 · 0 评论 -
vue3.0 provide/inject
1、上级组件导入 import { provide } from 'vue'; setup(){ provide('key', value) 使得数据具有响应性 provide(key,ref(...)) provide(key,reactive(...)) }2、子级组件导入 import { inject } from 'vue'; setup(){ const data=inject(key,'默认值'); }...原创 2021-05-22 15:25:39 · 970 阅读 · 0 评论 -
vue3.0 props参数验证
在vue3里面,可以添加类型约束,向下兼容2.5版本的写法 props:{ 传递参数,可以直接添加类型约束 msg:String, age:String },代码示例: props: { //传递参数,可以添加类型约束 msg: String, age:String },...原创 2021-05-21 14:52:26 · 699 阅读 · 0 评论 -
vue3.0 Suspense悬挂异步组件、定义异步组件
1、导入异步组件 方式一: 若组件setup返回的是一个Promise对象,则该组件默认为异步组件,导入时使用defineAsyncComponent异步导入/import同步导入都行 方式二: 手动定义异步组件并导入 defineAsyncComponent(()=> import('./components/HelloWorld.vue'))2、使用Suspense悬挂,当异步组件加载完成时,将展示设置的同步内容 <Suspense> <原创 2021-04-10 21:07:18 · 813 阅读 · 0 评论 -
vue3.0 teleport传送标签
作用: 能将teleport标签内的元素,添加到页面任意元素已有内容后使用: <teleport to='css选择器' disabled 禁止移动,就在本位置显示 > ... </teleport>效果图:代码示例:<template> <!-- 不用写根标签 --> <div>hh</div> <div class="ff">ww</div> <t原创 2021-04-10 20:18:54 · 623 阅读 · 0 评论 -
vue3.0 响应式代理和vue2区别
通过Proxy(代理):拦截对data任意属性的任意(13种)操作,包括属性值的读写,属性的添加,属性的删除等...通过Reflect(反射):动态对被代理对象的相应属性进行特定的操作原创 2021-04-08 20:24:52 · 282 阅读 · 0 评论 -
vue3.0 customRef
(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger,并返回一个一个带有 get 和 set 属性的对象使用: import {customRef} from 'vue'; function useDebouncedRef(value) { return customRef((track, trigger) => { re原创 2020-07-25 23:18:47 · 3010 阅读 · 1 评论 -
vue3.0 响应式工具集
使用 import {unref,toRef,toRefs,isRef,isProxy,isRefs,isReactive,isReadonly} from 'vue' (1)unref 判断是否是ref对象,是返回ref对象.value值,不是返回参数本身 const xx=unref(x) (2)toRef 为一个reactive对象的属性创建一个ref,并返回该ref,即可通过返回值和reactive对象操作属性 const x = reactive({xx:xxx})原创 2020-07-25 22:41:02 · 583 阅读 · 0 评论 -
vue3.0 生命周期函数
从'vue'中引入的生命周期函数,这些生命周期钩子注册函数只能在 setup() 期间同步使用,因为它们依赖于内部的全局状态来定位当前组件实例(正在调用 setup() 的组件实例), 不在当前组件下调用这些函数会抛出一个错误。使用 import { onMounted } from 'vue' setup() { onMounted(()=>{ ... }) 新增两个生命周期函数 onRenderTracked((e)=>{ 当一个 r原创 2020-07-25 21:36:05 · 12332 阅读 · 0 评论 -
vue3.x 副作用管理域effectScope
.创建一个管理watcher、computed这样的作用域,以便能够统一停止它们1、使用 const scope = effectScope() scope.run(() => { const doubled = computed(() => counter.value * 2) watch(doubled, () => console.log(doubled.value)) watchEffect(() => console.log('Count原创 2022-03-31 14:22:32 · 743 阅读 · 0 评论 -
vue3.0 watch
和watchEffect区别: (1)不会立即执行,当侦听的源变更时才会执行 (2)可以监听多个数据源相同: watch和watchEffect在停止侦听,清除副作用(相应地onInvalidate会作为回调的第三个参数传入),副作用刷新时机和侦听器调试等方面行为一致.使用 import { watch } from 'vue' setup(){ (1)监听单个数据源 方式一: 通过函数返回值 watch(()=>{ return x.value原创 2020-07-25 21:22:13 · 9687 阅读 · 0 评论 -
vue3.0 watchEffect
立即执行传入的一个函数,并响应式追踪其依赖,并在其依赖变更时重新运行该函数。 依赖即为函数中使用的ref/reactive对象的value用法: import { watchEffect } from 'vue' setup() { watchEffect(函数(){ 使用到了哪个ref/reactive对象.value,就监听哪个 }) }代码示例:<template> <div> <img src原创 2020-07-25 17:12:34 · 13112 阅读 · 0 评论 -
vue3.0 computed
计算属性: 返回一个 ref 对象。使用: import { computed } from 'vue' setup(){ const x=computed(()=>{ return xx }) (1)调用(调用返回的ref对象,注意自动解套的情况): xx.value (2)默认为不可修改的getter函数,传入包含get和set的对象,变成可修改 const xx=computed({ get: () =&原创 2020-07-25 16:53:22 · 5290 阅读 · 0 评论 -
vue3.0 reactive
接收一个普通对象然后返回该普通对象的响应式代理,会影响对象内部所有嵌套的属性,即发生改变触发视图层变化使用: import { reactive } from 'vue' setup() { const x = reactive(对象) 只有当reactive的参数是{}时 ({xx:ref(xx)})时,不用解套ref 传入其他对象时,需要.value解套ref const arr = reactive([ref(0)]) console.l原创 2020-07-25 16:38:19 · 1801 阅读 · 0 评论 -
vue3.0 ref
让数据变成响应式,即改变会引发视图层的变化使用 import { ref } from 'vue' setup(){ const xx =ref(初始值) (1)调用 xx.value (2)自动解套(即不需要xx.value获取值) 1、在setup的return{xx}中,在template中直接{{xx}} 2、在reactive定义的对象属性中 const x=ref(xx) const xxx=reactive({x原创 2020-07-25 16:28:55 · 10867 阅读 · 1 评论 -
vue3.0 setup
(1)setup函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点(2)之前的data、声明周期、自定义函数都放置在内(3)创建组件实例,然后初始化 props ,紧接着就调用setup 函数。从生命周期钩子的视角来看,它会在 beforeCreate 钩子之前被调用 1、使用export default{ setup(props,context){ props: 组件传递的参数,不要使用解构赋值,会使得参数失去响应性 context:原创 2020-07-25 16:02:06 · 5405 阅读 · 3 评论 -
vue3.0 环境搭建
1、安装 cnpm install @vue/composition-api --save2、使用 在main.js中 import VueComposition from "@vue/composition-api"; Vue.use(VueComposition);原创 2020-07-25 15:22:30 · 337 阅读 · 0 评论