Vue3
文章平均质量分 63
vue3
richest_qi
这个作者很懒,什么都没留下…
展开
-
Vue3的teleport组件
teleport,是传送的意思。看个具体的例子吧。项目目录如下。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')祖组件App.vue<template> <div class="app"> <h2>我是App组件</h2> <Son/> </div>原创 2022-03-20 12:43:56 · 633 阅读 · 1 评论 -
Vue3的fragment
vue2时,组件的模板结构中出现多个标签时,需要使用根标签。vue3时,组件的模板结构中出现多个标签时,可以不用根标签。这是因为vue3会自动将多个标签用Fragment组件包裹。举个例子。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <h2>当前和值为{{sum}}</h原创 2022-03-20 11:17:16 · 4277 阅读 · 0 评论 -
Vue3中响应式数据的判断
Vue3中,常用的响应式数据判断方法有以下几个:isRef,是否是由ref定义的响应式数据isReactive,是否是由reactive定义的响应式数据isReadonly,是否是由readonly定义的数据isProxy,是否是由reactive或readonly定义的数据看个简单的例子吧。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')原创 2022-03-20 10:58:40 · 2289 阅读 · 0 评论 -
Vue3的provide和inject
provide和inject用于实现祖组件与其后代组件(如子组件、孙组件、重孙组件等等)间的通信,有点像Vue2时的事件总线。具体看个例子吧。项目目录如下。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')祖组件App.vue<template> <div class="app"> <h2>原创 2022-03-20 10:40:41 · 368 阅读 · 0 评论 -
Vue3中自定义ref
文章目录使用ref使用customRef自定义ref使用refmain.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <input type="text" v-model="keyWord"> <h3>{{keyWord}}</h3></template&原创 2022-03-19 18:34:50 · 3688 阅读 · 2 评论 -
Vue3的toRaw和markRaw
文章目录使用toRaw不使用markRaw使用markRawtoRaw,将响应式对象(由 reactive定义的响应式)转换为普通对象。markRaw,标记一个对象,使其不能成为一个响应式对象。使用toRawmain.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/><原创 2022-03-19 16:52:52 · 8737 阅读 · 2 评论 -
Vue3的readonly与shallowReadonly
文章目录基础实例使用readonly使用shallowReadonlyreadonly,让一个响应式数据只读(深层次只读)。shallowReadonly,让一个响应式数据只读(浅层次只读)。基础实例项目目录如下。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/>原创 2022-03-19 12:45:04 · 395 阅读 · 0 评论 -
Vue3的shallowReactive和shallowRef
文章目录reactive与shallowReactive使用reactive使用shallowReactiveref与shallowRef使用ref使用shallowRefshallowReactive类似reactive,不同的是,shallowReactive只处理对象最外层属性的响应式。shallowRef类似ref,不同的是,shallowRef只处理基本类型的响应式,不处理对象类型的响应式。看下面几个例子就知道了。项目目录如下。以下的对比测试,仅对Demo.vue进行变更,main.j原创 2022-03-19 12:13:15 · 671 阅读 · 1 评论 -
Vue3中的toRef和toRefs
文章目录基础实例错误修改正确修改:使用toRef正确修改:使用toRefs小结基础实例先看例子吧。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/></template><script>import Demo from './compon原创 2022-03-18 22:22:27 · 2759 阅读 · 0 评论 -
Vue3中自定义hook
hook,本质是一个函数。自定义hook,就是将setup中使用过的组合式函数进行封装,实现代码复用。看个具体的例子吧。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <button @click="isShowDemo = !isShowDemo">切换(隐藏/显示)</bu原创 2022-03-18 21:20:22 · 2386 阅读 · 0 评论 -
Vue3的生命周期函数
文章目录通过配置项的形式使用生命周期钩子通过组合式API的形式使用生命周期钩子使用Vue3的生命周期钩子,有两种写法,通过配置项的形式使用生命周期钩子。通过组合式API的形式使用生命周期钩子。通过配置项的形式使用生命周期钩子Vue3有如下生命周期钩子,分别是,beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted看具体例子吧。main.jsimport { cre原创 2022-03-18 17:26:35 · 1249 阅读 · 0 评论 -
Vue3的watchEffect函数
使用watch函数监听时,需要指明要监听的属性及其对应的回调。使用watchEffect函数监听时,不需要指明要监听的属性,在监听回调中用到了哪个属性,就会监听哪个属性。看具体的例子吧 。main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/></template&g原创 2022-03-18 16:28:57 · 319 阅读 · 0 评论 -
Vue3的监听函数
文章目录Vue3监听ref定义的响应式数据监听一个ref定义的响应式数据监听多个ref定义的的响应式数据Vue3监听reactive定义的响应式数据Vue3监听ref定义的响应式数据监听一个ref定义的响应式数据main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/><原创 2022-03-18 12:04:46 · 3571 阅读 · 1 评论 -
Vue3的计算函数
文章目录计算属性的简写计算属性的完整写法Vue3中的计算属性有两种写法:简写和完整写法。下面一一介绍下。计算属性的简写main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')App.vue<template> <Demo/></template><script>import Demo from原创 2022-03-17 21:10:35 · 2614 阅读 · 0 评论 -
setup的两个注意点
setup的执行时机,setup在beforeCreate之前执行一次,this为undefined。main.jsimport { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app')App.vue<template> <HelloWorld/></template><script>import HelloWorld原创 2022-03-17 20:11:04 · 863 阅读 · 0 评论 -
Vue3响应式原理
文章目录Vue2响应式存在的问题暴露问题解决问题Vue3响应式原理Vue2响应式存在的问题Vue2响应式存在以下问题(当然,Vue2也提供了对应的解决方法),新增或删除对象属性,界面不会更新。直接通过下标修改数组,界面不会更新。暴露问题入口文件main.jsimport Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(A原创 2022-03-16 21:23:31 · 1333 阅读 · 0 评论 -
reactive函数实现响应式数据
使用reactive函数可以定义对象类型、数组类型的响应式数据。看个具体的例子。入口文件main.jsimport { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app')App.vue<template> <h1>个人信息</h1> <h2>姓名:{{name}}</h2> <h2>年龄:{{原创 2022-03-16 13:58:31 · 1053 阅读 · 0 评论 -
ref函数实现响应式数据
文章目录ref函数处理基本类型ref函数处理对象类型ref函数处理基本类型入口文件main.jsimport { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app')App.vue<template> <h1>个人信息</h1> <h2>姓名:{{name}}</h2> <h2>年龄:{{age原创 2022-03-16 12:41:55 · 3412 阅读 · 0 评论 -
使用setup
文章目录setup函数返回值是一个对象setup函数返回值是一个渲染函数setup是一个配置项,其值是一个函数。组件用到的数据、方法等都放在setup这个配置项中。setup函数的返回值,可以是一个对象,也可以是一个函数(且是渲染函数)。setup函数返回值是一个对象时,对象的属性、方法都可以在模板中直接使用。setup函数返回值是一个渲染函数时,可以自定义渲染内容。setup函数返回值是一个对象入口文件main.jsimport { createApp } from 'vue';im原创 2022-03-15 21:41:16 · 1477 阅读 · 0 评论 -
创建Vue3项目
文章目录使用vue-cli创建Vue3工程使用vite创建Vue3工程使用vue-cli创建Vue3工程vue create vue2_democd vue2_demonpm run serve使用vite创建Vue3工程npm init vite-app vue3_democd vue3_demonpm installnpm run dev原创 2022-03-15 20:48:21 · 800 阅读 · 0 评论