精华内容
下载资源
问答
  • vue3快速上手
    2021-07-02 07:57:31

    认识Vue3

    1. 了解相关信息

    • Vue.js 3.0 “One Piece” 正式版在今年9月份发布
    • 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
    • Vue3支持vue2的大多数特性
    • 更好的支持Typescript

    2. 性能提升

    • 打包大小减少41%
    • 初次渲染快55%, 更新渲染快133%
    • 内存减少54%
    • 使用Proxy代替defineProperty实现数据响应式
    • 重写虚拟DOM的实现和Tree-Shaking

    3. 新增特性

    • Composition (组合) API
    • setup
      • ref 和 reactive
      • computed 和 watch
      • 新的生命周期函数
      • provide与inject
    • 新组件
      • Fragment - 文档碎片
      • Teleport - 瞬移组件的位置
      • Suspense - 异步加载组件的loading界面
    • 其它API更新
      • 全局API的修改
      • 将原来的全局API转移到应用对象
      • 模板语法变化

    创建Vue3项目

    1. 使用vue-cli创建

    文档

    ## 安装或者升级
    npm install -g @vue/cli
    ## 保证 vue cli 版本在 4.5.0 以上
    vue --version
    ## 创建项目
    vue create my-project
    

    然后的步骤

    • Please pick a preset - 选择 Manually select features
    • Check the features needed for your project - 选择上 TypeScript ,特别注意点空格是选择,点回车是下一步
    • Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
    • Use class-style component syntax - 直接回车
    • Use Babel alongside TypeScript - 直接回车
    • Pick a linter / formatter config - 直接回车
    • Use history mode for router? - 直接回车
    • Pick a linter / formatter config - 直接回车
    • Pick additional lint features - 直接回车
    • Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
    • Save this as a preset for future projects? - 直接回车

    2. 使用vite创建

    • 文档
    • vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,
    • 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。
      • 快速的冷启动,不需要等待打包操作;
      • 即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
      • 真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。
    npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev
    
    更多相关内容
  • vue3快速上手教学笔记.md
  • vue3快速上手.md

    2022-01-06 14:43:18
    - Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API(组合API) - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
  • Vue3快速上手(Vue3学习笔记) .Vue3简介 - 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) - 耗时2年多、[2600+次提交](https://github.com/vuejs/vue-next/graphs/commit-activity)、[30+个RFC]...
  • vue3快速上手demo,结合vant3,快速能理解手机开发、vue3开发
  • Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:...

    Vue3快速上手

    1.Vue3简介

    2.Vue3带来了什么

    1.性能的提升

    • 打包大小减少41%

    • 初次渲染快55%, 更新渲染快133%

    • 内存减少54%

    2.源码的升级

    • 使用Proxy代替defineProperty实现响应式

    • 重写虚拟DOM的实现和Tree-Shaking

    3.拥抱TypeScript

    • Vue3可以更好的支持TypeScript

    4.新的特性

    1. Composition API(组合API)

      • setup配置
      • ref与reactive
      • watch与watchEffect
      • provide与inject
    2. 新的内置组件

      • Fragment
      • Teleport
      • Suspense
    3. 其他改变

      • 新的生命周期钩子
      • data 选项应始终被声明为一个函数
      • 移除keyCode支持作为 v-on 的修饰符

    一、创建Vue3.0工程

    1.使用 vue-cli 创建

    官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

    ## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
    vue --version
    ## 安装或者升级你的@vue/cli
    npm install -g @vue/cli
    ## 创建
    vue create vue_test
    ## 启动
    cd vue_test
    npm run serve
    

    2.使用 vite 创建

    官方文档:https://v3.cn.vuejs.org/guide/installation.html#vite

    vite官网:https://vitejs.cn

    • 什么是vite?—— 新一代前端构建工具。
    • 优势如下:
      • 开发环境中,无需打包操作,可快速的冷启动。
      • 轻量快速的热重载(HMR)。
      • 真正的按需编译,不再等待整个应用编译完成。
    • 传统构建 与 vite构建对比图

    ## 创建工程
    npm init vite-app <project-name>
    ## 进入工程目录
    cd <project-name>
    ## 安装依赖
    npm install
    ## 运行
    npm run dev
    

    二、常用 Composition API

    官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

    1.拉开序幕的setup

    1. 理解:Vue3.0中一个新的配置项,值为一个函数。
    2. setup是所有Composition API(组合API)“ 表演的舞台 ”
    3. 组件中所用到的:数据、方法等等,均要配置在setup中。
    4. setup函数的两种返回值:
      1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)
      2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)
    5. 注意点:
      1. 尽量不要与Vue2.x配置混用
        • Vue2.x配置(data、methos、computed…)中可以访问到setup中的属性、方法。
        • 但在setup中不能访问到Vue2.x配置(data、methos、computed…)。
        • 如果有重名, setup优先。
      2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

    2.ref函数

    • 作用: 定义一个响应式的数据
    • 语法: const xxx = ref(initValue)
      • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
      • JS中操作数据: xxx.value
      • 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
    • 备注:
      • 接收的数据可以是:基本类型、也可以是对象类型。
      • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的。
      • 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

    3.reactive函数

    • 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
    • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
    • reactive定义的响应式数据是“深层次的”。
    • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。

    4.Vue3.0中的响应式原理

    vue2.x的响应式

    • 实现原理:

      • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

      • 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。

        Object.defineProperty(data, 'count', {
            get () {}, 
            set () {}
        })
        
    • 存在问题:

      • 新增属性、删除属性, 界面不会更新。
      • 直接通过下标修改数组, 界面不会自动更新。

    Vue3.0的响应式

    • 实现原理:
      • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
      • 通过Reflect(反射): 对源对象的属性进行操作。
      • MDN文档中描述的Proxy与Reflect:
        • Proxy:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

        • Reflect:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

          new Proxy(data, {
          	// 拦截读取属性值
              get (target, prop) {
              	return Reflect.get(target, prop)
              },
              // 拦截设置属性值或添加新属性
              set (target, prop, value) {
              	return Reflect.set(target, prop, value)
              },
              // 拦截删除属性
              deleteProperty (target, prop) {
              	return Reflect.deleteProperty(target, prop)
              }
          })
          
          proxy.name = 'tom'   
          

    5.reactive对比ref

    • 从定义数据角度对比:
      • ref用来定义:基本类型数据
      • reactive用来定义:对象(或数组)类型数据
      • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象
    • 从原理角度对比:
      • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。
      • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
    • 从使用角度对比:
      • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
      • reactive定义的数据:操作数据与读取数据:均不需要.value

    6.setup的两个注意点

    • setup执行的时机

      • 在beforeCreate之前执行一次,this是undefined。
    • setup的参数

      • props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
      • context:上下文对象
        • attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs
        • slots: 收到的插槽内容, 相当于 this.$slots
        • emit: 分发自定义事件的函数, 相当于 this.$emit

    7.计算属性与监视

    1.computed函数

    • 与Vue2.x中computed配置功能一致

    • 写法

      import {computed} from 'vue'
      
      setup(){
          ...
      	//计算属性——简写
          let fullName = computed(()=>{
              return person.firstName + '-' + person.lastName
          })
          //计算属性——完整
          let fullName = computed({
              get(){
                  return person.firstName + '-' + person.lastName
              },
              set(value){
                  const nameArr = value.split('-')
                  person.firstName = nameArr[0]
                  person.lastName = nameArr[1]
              }
          })
      }
      

    2.watch函数

    • 与Vue2.x中watch配置功能一致

    • 两个小“坑”:

      • 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。
      • 监视reactive定义的响应式数据中某个属性时:deep配置有效。
      //情况一:监视ref定义的响应式数据
      watch(sum,(newValue,oldValue)=>{
      	console.log('sum变化了',newValue,oldValue)
      },{immediate:true})
      
      //情况二:监视多个ref定义的响应式数据
      watch([sum,msg],(newValue,oldValue)=>{
      	console.log('sum或msg变化了',newValue,oldValue)
      }) 
      
      /* 情况三:监视reactive定义的响应式数据
      			若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!
      			若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 
      */
      watch(person,(newValue,oldValue)=>{
      	console.log('person变化了',newValue,oldValue)
      },{immediate:true,deep:false}) //此处的deep配置不再奏效
      
      //情况四:监视reactive定义的响应式数据中的某个属性
      watch(()=>person.job,(newValue,oldValue)=>{
      	console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true}) 
      
      //情况五:监视reactive定义的响应式数据中的某些属性
      watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
      	console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true})
      
      //特殊情况
      watch(()=>person.job,(newValue,oldValue)=>{
          console.log('person的job变化了',newValue,oldValue)
      },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
      

    3.watchEffect函数

    • watch的套路是:既要指明监视的属性,也要指明监视的回调。

    • watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。

    • watchEffect有点像computed:

      • 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
      • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
      //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
      watchEffect(()=>{
          const x1 = sum.value
          const x2 = person.age
          console.log('watchEffect配置的回调执行了')
      })
      

    8.生命周期

    vue2.x的生命周期 lifecycle_2
    vue3.0的生命周期 lifecycle_2

    1

    • Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
      • beforeDestroy改名为 beforeUnmount
      • destroyed改名为 unmounted
    • Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
      • beforeCreate===>setup()
      • created=======>setup()
      • beforeMount ===>onBeforeMount
      • mounted=======>onMounted
      • beforeUpdate===>onBeforeUpdate
      • updated =======>onUpdated
      • beforeUnmount ==>onBeforeUnmount
      • unmounted =====>onUnmounted

    9.自定义hook函数

    • 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。

    • 类似于vue2.x中的mixin。

    • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

    10.toRef

    • 作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。

    • 语法:const name = toRef(person,'name')

    • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

    • 扩展:toRefstoRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)

    三、其它 Composition API

    1.shallowReactive 与 shallowRef

    • shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

    • shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。

    • 什么时候使用?

      • 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
      • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。

    2.readonly 与 shallowReadonly

    • readonly: 让一个响应式数据变为只读的(深只读)。
    • shallowReadonly:让一个响应式数据变为只读的(浅只读)。
    • 应用场景: 不希望数据被修改时。

    3.toRaw 与 markRaw

    • toRaw:
      • 作用:将一个由reactive生成的响应式对象转为普通对象
      • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
    • markRaw:
      • 作用:标记一个对象,使其永远不会再成为响应式对象。
      • 应用场景:
        1. 有些值不应被设置为响应式的,例如复杂的第三方类库等。
        2. 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

    4.customRef

    • 作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。

    • 实现防抖效果:

      <template>
      	<input type="text" v-model="keyword">
      	<h3>{{keyword}}</h3>
      </template>
      
      <script>
      	import {ref,customRef} from 'vue'
      	export default {
      		name:'Demo',
      		setup(){
      			// let keyword = ref('hello') //使用Vue准备好的内置ref
      			//自定义一个myRef
      			function myRef(value,delay){
      				let timer
      				//通过customRef去实现自定义
      				return customRef((track,trigger)=>{
      					return{
      						get(){
      							track() //告诉Vue这个value值是需要被“追踪”的
      							return value
      						},
      						set(newValue){
      							clearTimeout(timer)
      							timer = setTimeout(()=>{
      								value = newValue
      								trigger() //告诉Vue去更新界面
      							},delay)
      						}
      					}
      				})
      			}
      			let keyword = myRef('hello',500) //使用程序员自定义的ref
      			return {
      				keyword
      			}
      		}
      	}
      </script>
      

    5.provide 与 inject

    • 作用:实现祖与后代组件间通信

    • 套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据

    • 具体写法:

      1. 祖组件中:

        setup(){
        	......
            let car = reactive({name:'奔驰',price:'40万'})
            provide('car',car)
            ......
        }
        
      2. 后代组件中:

        setup(props,context){
        	......
            const car = inject('car')
            return {car}
        	......
        }
        

    6.响应式数据的判断

    • isRef: 检查一个值是否为一个 ref 对象
    • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
    • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
    • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

    四、Composition API 的优势

    1.Options API 存在的问题

    使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。

    2.Composition API 的优势

    我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。

    五、新的组件

    1.Fragment

    • 在Vue2中: 组件必须有一个根标签
    • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
    • 好处: 减少标签层级, 减小内存占用

    2.Teleport

    • 什么是Teleport?—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

      <teleport to="移动位置">
      	<div v-if="isShow" class="mask">
      		<div class="dialog">
      			<h3>我是一个弹窗</h3>
      			<button @click="isShow = false">关闭弹窗</button>
      		</div>
      	</div>
      </teleport>
      

    3.Suspense

    • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验

    • 使用步骤:

      • 异步引入组件

        import {defineAsyncComponent} from 'vue'
        const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
        
      • 使用Suspense包裹组件,并配置好defaultfallback

        <template>
        	<div class="app">
        		<h3>我是App组件</h3>
        		<Suspense>
        			<template v-slot:default>
        				<Child/>
        			</template>
        			<template v-slot:fallback>
        				<h3>加载中.....</h3>
        			</template>
        		</Suspense>
        	</div>
        </template>
        

    六、其他

    1.全局API的转移

    • Vue 2.x 有许多全局 API 和配置。

      • 例如:注册全局组件、注册全局指令等。

        //注册全局组件
        Vue.component('MyButton', {
          data: () => ({
            count: 0
          }),
          template: '<button @click="count++">Clicked {{ count }} times.</button>'
        })
        
        //注册全局指令
        Vue.directive('focus', {
          inserted: el => el.focus()
        }
        
    • Vue3.0中对这些API做出了调整:

      • 将全局的API,即:Vue.xxx调整到应用实例(app)上

        2.x 全局 API(Vue3.x 实例 API (app)
        Vue.config.xxxxapp.config.xxxx
        Vue.config.productionTip移除
        Vue.componentapp.component
        Vue.directiveapp.directive
        Vue.mixinapp.mixin
        Vue.useapp.use
        Vue.prototypeapp.config.globalProperties

    2.其他改变

    • data选项应始终被声明为一个函数。

    • 过度类名的更改:

      • Vue2.x写法

        .v-enter,
        .v-leave-to {
          opacity: 0;
        }
        .v-leave,
        .v-enter-to {
          opacity: 1;
        }
        
      • Vue3.x写法

        .v-enter-from,
        .v-leave-to {
          opacity: 0;
        }
        
        .v-leave-from,
        .v-enter-to {
          opacity: 1;
        }
        
    • 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes

    • 移除v-on.native修饰符

      • 父组件中绑定事件

        <my-component
          v-on:close="handleComponentEvent"
          v-on:click="handleNativeClickEvent"
        />
        
      • 子组件中声明自定义事件

        <script>
          export default {
            emits: ['close']
          }
        </script>
        
    • 移除过滤器(filter)

      过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。

    展开全文
  • vue3快速上手vue3对比vue2 的变化。
  • vue3快速上手经验总结

    千次阅读 2022-05-06 22:18:13
    挺长时间没有用vue3了,发现看文档需要的时间还挺长,我想5-10分钟就掌握不容易,于是就想写一篇文章快速让我掌握,于是就有了这篇文章。

    目录

    前言:

    1.vue3带来的新变化

    2.vue3的重点--组合式api的理解

    3.vue3和vue2的优缺点

    4.使用vue3难点分析

    5.vue3的语法


    前言:

    本文基于熟练掌握vue2的同学,没有使用过的可以去看官方文档。


    挺长时间没有用vue3了,发现看文档浪费的时间还挺长,我想5-10分钟就掌握不容易,于是就想写一篇文章快速让我掌握vue3,于是就有了这篇文章。

    相关阅读: Vue3 中文文档icon-default.png?t=M3K6https://vue3js.cn/docs/zh/ Vue3 设计理念icon-default.png?t=M3K6https://vue3js.cn/vue-composition/ 相关UI资源库和插件库:
     

    支持 vue3 的UI组件库: ant-design-vue, element-plus, vant

    基于composition组合api的常用集合 : VueUse


     1.vue3带来的新变化

    + :

    1.性能提升

    2.更好的支持typescript

    3.组合式API : Composition API

    4.不再强制要求只有一个根元素


    - :

    1.移除vue2的$on、

    2.过滤器

    3. .sync语法(与v-model合并)


    注:

    1.生命周期发生变化-setup替代原先前两个生命周期钩子函数(this指向undefined的原因)

    2.package.json、main.js、app.vue文件有些写法上的改变,问题不大。

    3.setup函数中记得return


    小结:个人以为,vue3和react hooks的写法很像


    2.vue3的重点--组合式api的理解

    composition API(Vue3)开发的特点是特定功能相关的所有东西都放到一起维护,比如功能A相关的响应式数据,操作数据的方法等放到一起,这样不管应用多大,都可以快读定位到某个功能的所有相关代码,维护方便设置,如果功能复杂,代码量大,我们还可以进行逻辑拆分处理。

     


    3.vue3和vue2的优缺点

    Vue2选项式API(option api)

    优点:简单,各选项各司其职;

    缺点:不方便功能复用;功能代码分散维护代码横跳


    Vue3组合式API(composition api)

    优点:功能代码组合维护, 方便功能复用;


    4.使用vue3难点分析

    最难理解的点应该是逻辑复用,既拆分各个组件,我们有时很难去把握一个度,不拆分不好复用拆的多了项目后期可能逻辑上不好理解,更别说作为接盘侠的话。


    还有一点,使用vue3大部分代码都在setup函数中写,那么如果里面代码多了,岂不是也面临代码臃肿逻辑复杂的情况吗?可以说这个点使得使用vue3的难度上升数倍!


    这里我以实际项目使用提出两种方案:

    1.在script标签里面setup函数外面定义函数,在setup函数里面引入函数使用。

    2.在其他文件夹下建立文件写函数,然后引入在setup函数中使用。


    小结:选项式API的精妙之处:分散定义,组合使用。

    以下是代码举例: 

    我们通过定义功能函数,把两个功能相关的代码各自抽离到一个独立的小函数中,然后通过在setup函数中再把两个小功能函数组合起来,这样一来,我们既可以把setup函数变得清爽,又可以方便维护快速定位功能位置。

    <script>
    import { ref } from 'vue'
    
    function useShow() {
      const showDivFlag = ref(true)
      function show() {
        showDivFlag.value = true
      }
      function hide() {
        showDivFlag.value = false
      }
      return { showDivFlag, show, hide }
    }
    
    function useColor() {
      const fontColor = ref('')
      function changeRed() {
        fontColor.value = 'red'
      }
      function changeBlue() {
        fontColor.value = 'blue'
      }
      return { fontColor, changeRed, changeBlue }
    }
    
    export default {
      name: 'App',
      setup() {
        // 功能一
        const { showDivFlag, show, hide } = useShow()
        // 功能二
        const { fontColor, changeRed, changeBlue } = useColor()
        
        return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
      }
    }
    </script>

     


    5.vue3的语法

    我之前写过一篇如何使用vue3语法的文章,比较详细,有兴趣的可以点进去看看。

     

    Vue3新特性和使用方法系统总结_接着奏乐接着舞。的博客-CSDN博客vue3.0 在20年9.18号更新,随着社区生态逐步完善,支持的组件库也越来越多。总结一下vue3带来一些新的变化,积极拥抱新技术,本文对3.0做了较为全面的总结,如有更新,还会更新此文章 ------2021年.7.13日第一次总结https://blog.csdn.net/wanghaoyingand/article/details/118694602?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165184832116782390538034%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165184832116782390538034&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-118694602-null-null.nonecase&utm_term=vue3&spm=1018.2226.3001.4450

    展开全文
  • vue3快速上手的基本常用API
  • Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:Release v3.0.0 One ...

    Vue3快速上手

    1.Vue3简介

    2.Vue3带来了什么

    1.性能的提升

    • 打包大小减少41%

    • 初次渲染快55%, 更新渲染快133%

    • 内存减少54%

      ......

    2.源码的升级

    • 使用Proxy代替defineProperty实现响应式

    • 重写虚拟DOM的实现和Tree-Shaking

      ......

    3.拥抱TypeScript

    • Vue3可以更好的支持TypeScript

    4.新的特性

    1. Composition API(组合API)

      • setup配置

      • ref与reactive

      • watch与watchEffect

      • provide与inject

      • ......

    2. 新的内置组件

      • Fragment

      • Teleport

      • Suspense

    3. 其他改变

      • 新的生命周期钩子

      • data 选项应始终被声明为一个函数

      • 移除keyCode支持作为 v-on 的修饰符

      • ......

    一、创建Vue3.0工程

    1.使用 vue-cli 创建

    官方文档:创建一个项目 | Vue CLI

    ## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
    vue --version
    ## 安装或者升级你的@vue/cli
    npm install -g @vue/cli
    ## 创建
    vue create vue_test
    ## 启动
    cd vue_test
    npm run serve

    2.使用 vite 创建

    官方文档:安装 | Vue.js

    vite官网:Home | Vite中文网

    • 什么是vite?—— 新一代前端构建工具。

    • 优势如下:

      • 开发环境中,无需打包操作,可快速的冷启动。

      • 轻量快速的热重载(HMR)。

      • 真正的按需编译,不再等待整个应用编译完成。

    • 传统构建 与 vite构建对比图

    ## 创建工程
    npm init vite-app <project-name>
    ## 进入工程目录
    cd <project-name>
    ## 安装依赖
    npm install
    ## 运行
    npm run dev

    二、常用 Composition API

    官方文档: 介绍 | Vue.js

    1.拉开序幕的setup

    1. 理解:Vue3.0中一个新的配置项,值为一个函数。

    2. setup是所有Composition API(组合API)“ 表演的舞台 ”

    3. 组件中所用到的:数据、方法等等,均要配置在setup中。

    4. setup函数的两种返回值:

      1. 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。(重点关注!)

      2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)

    5. 注意点:

      1. 尽量不要与Vue2.x配置混用

        • Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。

        • 但在setup中不能访问到Vue2.x配置(data、methos、computed...)。

        • 如果有重名, setup优先。

      2. setup不能是一个async函数,因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

    2.ref函数

    • 作用: 定义一个响应式的数据

    • 语法: const xxx = ref(initValue)

      • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)

      • JS中操作数据: xxx.value

      • 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>

    • 备注:

      • 接收的数据可以是:基本类型、也可以是对象类型。

      • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的。

      • 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

    3.reactive函数

    • 作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)

    • 语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)

    • reactive定义的响应式数据是“深层次的”。

    • 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作。

    4.Vue3.0中的响应式原理

    vue2.x的响应式

    • 实现原理:

      • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

      • 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。

        Object.defineProperty(data, 'count', {
            get () {}, 
            set () {}
        })
    • 存在问题:

      • 新增属性、删除属性, 界面不会更新。

      • 直接通过下标修改数组, 界面不会自动更新。

    Vue3.0的响应式

    • 实现原理:

      • 通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。

      • 通过Reflect(反射): 对源对象的属性进行操作。

      • MDN文档中描述的Proxy与Reflect:

        • Proxy:Proxy - JavaScript | MDN

        • Reflect:Reflect - JavaScript | MDN

          new Proxy(data, {
            // 拦截读取属性值
              get (target, prop) {
                return Reflect.get(target, prop)
              },
              // 拦截设置属性值或添加新属性
              set (target, prop, value) {
                return Reflect.set(target, prop, value)
              },
              // 拦截删除属性
              deleteProperty (target, prop) {
                return Reflect.deleteProperty(target, prop)
              }
          })
          ​
          proxy.name = 'tom'   

    5.reactive对比ref

    • 从定义数据角度对比:

      • ref用来定义:基本类型数据

      • reactive用来定义:对象(或数组)类型数据

      • 备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象

    • 从原理角度对比:

      • ref通过Object.defineProperty()getset来实现响应式(数据劫持)。

      • reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。

    • 从使用角度对比:

      • ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value

      • reactive定义的数据:操作数据与读取数据:均不需要.value

    6.setup的两个注意点

    • setup执行的时机

      • 在beforeCreate之前执行一次,this是undefined。

    • setup的参数

      • props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。

      • context:上下文对象

        • attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs

        • slots: 收到的插槽内容, 相当于 this.$slots

        • emit: 分发自定义事件的函数, 相当于 this.$emit

    7.计算属性与监视

    1.computed函数

    • 与Vue2.x中computed配置功能一致

    • 写法

      import {computed} from 'vue'
      ​
      setup(){
          ...
        //计算属性——简写
          let fullName = computed(()=>{
              return person.firstName + '-' + person.lastName
          })
          //计算属性——完整
          let fullName = computed({
              get(){
                  return person.firstName + '-' + person.lastName
              },
              set(value){
                  const nameArr = value.split('-')
                  person.firstName = nameArr[0]
                  person.lastName = nameArr[1]
              }
          })
      }

    2.watch函数

    • 与Vue2.x中watch配置功能一致

    • 两个小“坑”:

      • 监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)。

      • 监视reactive定义的响应式数据中某个属性时:deep配置有效。

      //情况一:监视ref定义的响应式数据
      watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
      },{immediate:true})
      ​
      //情况二:监视多个ref定义的响应式数据
      watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变化了',newValue,oldValue)
      }) 
      ​
      /* 情况三:监视reactive定义的响应式数据
            若watch监视的是reactive定义的响应式数据,则无法正确获得oldValue!!
            若watch监视的是reactive定义的响应式数据,则强制开启了深度监视 
      */
      watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
      },{immediate:true,deep:false}) //此处的deep配置不再奏效
      ​
      //情况四:监视reactive定义的响应式数据中的某个属性
      watch(()=>person.job,(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true}) 
      ​
      //情况五:监视reactive定义的响应式数据中的某些属性
      watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
        console.log('person的job变化了',newValue,oldValue)
      },{immediate:true,deep:true})
      ​
      //特殊情况
      watch(()=>person.job,(newValue,oldValue)=>{
          console.log('person的job变化了',newValue,oldValue)
      },{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效

    3.watchEffect函数

    • watch的套路是:既要指明监视的属性,也要指明监视的回调。

    • watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。

    • watchEffect有点像computed:

      • 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。

      • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。

      //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调。
      watchEffect(()=>{
          const x1 = sum.value
          const x2 = person.age
          console.log('watchEffect配置的回调执行了')
      })

    8.生命周期

    vue2.x的生命周期

    lifecycle_2

    vue3.0的生命周期

     

    • Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:

      • beforeDestroy改名为 beforeUnmount

      • destroyed改名为 unmounted

    • Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:

      • beforeCreate===>setup()

      • created=======>setup()

      • beforeMount ===>onBeforeMount

      • mounted=======>onMounted

      • beforeUpdate===>onBeforeUpdate

      • updated =======>onUpdated

      • beforeUnmount ==>onBeforeUnmount

      • unmounted =====>onUnmounted

    9.自定义hook函数

    • 什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。

    • 类似于vue2.x中的mixin。

    • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

    10.toRef

    • 作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。

    • 语法:const name = toRef(person,'name')

    • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

    • 扩展:toRefstoRef功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)

    三、其它 Composition API

    1.shallowReactive 与 shallowRef

    • shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

    • shallowRef:只处理基本数据类型的响应式, 不进行对象的响应式处理。

    • 什么时候使用?

      • 如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

      • 如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===> shallowRef。

    2.readonly 与 shallowReadonly

    • readonly: 让一个响应式数据变为只读的(深只读)。

    • shallowReadonly:让一个响应式数据变为只读的(浅只读)。

    • 应用场景: 不希望数据被修改时。

    3.toRaw 与 markRaw

    • toRaw:

      • 作用:将一个由reactive生成的响应式对象转为普通对象

      • 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。

    • markRaw:

      • 作用:标记一个对象,使其永远不会再成为响应式对象。

      • 应用场景:

        1. 有些值不应被设置为响应式的,例如复杂的第三方类库等。

        2. 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

    4.customRef

    • 作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。

    • 实现防抖效果:

      <template>
        <input type="text" v-model="keyword">
        <h3>{{keyword}}</h3>
      </template>
      ​
      <script>
        import {ref,customRef} from 'vue'
        export default {
          name:'Demo',
          setup(){
            // let keyword = ref('hello') //使用Vue准备好的内置ref
            //自定义一个myRef
            function myRef(value,delay){
              let timer
              //通过customRef去实现自定义
              return customRef((track,trigger)=>{
                return{
                  get(){
                    track() //告诉Vue这个value值是需要被“追踪”的
                    return value
                  },
                  set(newValue){
                    clearTimeout(timer)
                    timer = setTimeout(()=>{
                      value = newValue
                      trigger() //告诉Vue去更新界面
                    },delay)
                  }
                }
              })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
              keyword
            }
          }
        }
      </script>

    5.provide 与 inject

    • 作用:实现祖与后代组件间通信

    • 套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据

    • 具体写法:

      1. 祖组件中:

        setup(){
        	......
            let car = reactive({name:'奔驰',price:'40万'})
            provide('car',car)
            ......
        }
      2. 后代组件中:

        setup(props,context){
        	......
            const car = inject('car')
            return {car}
        	......
        }

    6.响应式数据的判断

    • isRef: 检查一个值是否为一个 ref 对象

    • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

    • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

    • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

    四、Composition API 的优势

    1.Options API 存在的问题

    使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改 。

    2.Composition API 的优势

    我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。

    五、新的组件

    1.Fragment

    • 在Vue2中: 组件必须有一个根标签

    • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

    • 好处: 减少标签层级, 减小内存占用

    2.Teleport

    • 什么是Teleport?—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

      <teleport to="移动位置">
      	<div v-if="isShow" class="mask">
      		<div class="dialog">
      			<h3>我是一个弹窗</h3>
      			<button @click="isShow = false">关闭弹窗</button>
      		</div>
      	</div>
      </teleport>

    3.Suspense

    • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验

    • 使用步骤:

      • 异步引入组件

        import {defineAsyncComponent} from 'vue'
        const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
      • 使用Suspense包裹组件,并配置好defaultfallback

        <template>
        	<div class="app">
        		<h3>我是App组件</h3>
        		<Suspense>
        			<template v-slot:default>
        				<Child/>
        			</template>
        			<template v-slot:fallback>
        				<h3>加载中.....</h3>
        			</template>
        		</Suspense>
        	</div>
        </template>

    六、其他

    1.全局API的转移

    • Vue 2.x 有许多全局 API 和配置。

      • 例如:注册全局组件、注册全局指令等。

        //注册全局组件
        Vue.component('MyButton', {
          data: () => ({
            count: 0
          }),
          template: '<button @click="count++">Clicked {{ count }} times.</button>'
        })
        
        //注册全局指令
        Vue.directive('focus', {
          inserted: el => el.focus()
        }
    • Vue3.0中对这些API做出了调整:

      • 将全局的API,即:Vue.xxx调整到应用实例(app)上

        2.x 全局 API(Vue3.x 实例 API (app)
        Vue.config.xxxxapp.config.xxxx
        Vue.config.productionTip移除
        Vue.componentapp.component
        Vue.directiveapp.directive
        Vue.mixinapp.mixin
        Vue.useapp.use
        Vue.prototypeapp.config.globalProperties

    2.其他改变

    • data选项应始终被声明为一个函数。

    • 过度类名的更改:

      • Vue2.x写法

        .v-enter,
        .v-leave-to {
          opacity: 0;
        }
        .v-leave,
        .v-enter-to {
          opacity: 1;
        }
      • Vue3.x写法

        .v-enter-from,
        .v-leave-to {
          opacity: 0;
        }
        
        .v-leave-from,
        .v-enter-to {
          opacity: 1;
        }
    • 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes

    • 移除v-on.native修饰符

      • 父组件中绑定事件

        <my-component
          v-on:close="handleComponentEvent"
          v-on:click="handleNativeClickEvent"
        />
      • 子组件中声明自定义事件

        <script>
          export default {
            emits: ['close']
          }
        </script>
    • 移除过滤器(filter)

      过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。

    • ......

    展开全文
  • Vue3快速上手

    2022-01-28 15:26:24
    vue3支持vue2大多数特性 更好地支持ts 2.性能提升 打包大小减少41% 初次渲染快55% 更新渲染快133% 内存减少54% 使用proxy代替defineProperty实现数据响应式 重写虚拟DOM的实现和Tree-Shaking 3.新增特性 ...
  • Vue3快速上手Vue3全解

    千次阅读 2022-05-01 15:49:29
    vue3快速上手vue3全解;
  • Vue3简介 面临的问题:随着功能的增长,复杂组件的代码变得难以维护,Vue3就随之而来,TypeScript使用的越来越多,Vue3就是TS写的所以能够更好的支持TypeScript 在这里介绍就这么简单 vue2的绝大多数的特性 在Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,395
精华内容 6,158
关键字:

vue3快速上手