uniapp开发:uniapp快速体验vue3.2之setup语法糖,怎么使用怎么爽

目录

  • 概要
  • 拉开序幕的setup语法糖
  • 生命周期钩子
  • ref函数与reactive函数对比
  • computed计算属性
  • 监视(watch、watchEffect)
  • 组件注册
  • 组件传值
  • provide/inject
  • style样式使用v-bind绑定动态值
  • 获取路由信息
  • 全局API的转移
  • Composition API 的优势
  • 关注我,不迷路
  • vue3.x相关会在将来持续更新…更新历史:20211122、20220222

概要

随着vue3.0的发布,不久后vue3.2紧接着发布了,现在uniapp也支持了vue3.2的编译。vue3.x的优点我在这里就不多说了,了解更多到uniapp官方vue3的教程。

从学习前端开始,学习的主要框架就是vue,一直以来也是vue的忠实粉丝。现在3.x的发布,让我感觉到它用在移动端上面是目前最好的选择,毕竟不需要考虑ie兼容。uniapp本身初衷就是为移动端而生,所以vue3.x用在uniapp上面,简直就是完美至极。

目前vue3.2在uniapp中暂时只支持h5,小程序端目前只支持到vue3.0,这只是时间的问题,uniapp的小程序肯定会支持vue3.2的,那么我们可以先拿h5来预热吧!uniapp中的vue3.2的用法在_vue-cli脚手架_项目中是完全一样,放心学习。

2020年2月22日补充:) 果然不出所料,上面之前写的就不删除了,留个纪念吧。在uniapp上几个版本已经全面支持了vue3.2了,小程序也不例外啦。正好最近用vue3.2开发了一款小程序“皮皮虎去水印”,开发的很爽!!!

vue3.2改进了 setup语法糖,怎么使用怎么爽! vue3.2的一些特性在vue3.0的基础上做出了改动,这篇文章直接总结vue3.2的特性,接下来就让我们快速体验vue3.2

下面讲解的内容不局限于vue3.2做出的改动,部分写法已在vue3.0中改动。

拉开序幕的setup语法糖

从vue3.2开始setup直接写在script标签上面,意味着所有的js代码直接在script中间完成。setup语法糖在vue的将来绝对是一种趋势,而且这种趋势已经到来。

是一种编译时语法糖,可在 SFC 内使用Composition API 时极大地提升工作效率。在script中声明的
js变量,template模板中可以直接读取使用,后面会有大量相关案例展示。

生命周期

虽然3.x写法上与2.x的script里面的代码相差很大,但是生命周期还是必不可少,毕竟在开发的过程中还是有需求不同阶段进行处理逻辑。

特性:在2.x的生命周期钩子前面加上“on”来访问组件的生命周期钩子。
了解更多vue3.x生命周期钩子


vue2.x与vue3.x生命周期的区别:

选项式 API

Hook inside setup

beforeCreate

Not needed*

created

Not needed*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

activated

onActivated

deactivated

onDeactivated

Tips: 因为setup是围绕beforeCreatecreated生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

ref函数与reactive函数对比

  • 从定义数据类型角度区分:

    • ref用来定义:基本数据类型
    • reactive用来定义:对象(或数组)类型数据
    • 备注:ref也可以用来定义对象(或数组)类型数据,其内部会自动通过reactive转换代理对象。
  • 从原理角度区分:

    • ref通过Object.defineProperty()getset来完成响应式(数据劫持)。
    • reactive通过使用Proxy 来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。
  • 从使用角度区分:

    • ref定义的数据:在js中操作数据需要.value,template模板中读取数据不需要.value:

      const v = ref(999);
      consle.log(v.value);// 这样获取的值是 999

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

      const data = reactive({
      a:1,
      b:2
      });
      consle.log(data);// 这样获取的值是{a:1,b:2}

computed计算属性

_computed_与vue2.x的配置项一致



监视(watch、watchEffect)

1. watch函数

  • watch的配置项与vue2.x中watch一致。

  • 注意的坑:在uniapp中,newValue和oldValue不要写成new和old,否则会报错。

情况一: 监视单个ref定义的响应式数据:


情况二: 监视多个ref定义的响应式数据:


情况三: 监视多个reactive定义的响应式数据:

  • 注意: watch监视的是reactive定义的响应式数据,则强制开启了深度监视,也就是说设置{deep:false}无效。

情况四: 监视reactive定义的响应式数据中的某个属性:


情况五: 监视reactive定义的响应式数据中的多个属性:


情况六: 监视reactive定义的数组:


情况七: 监视vuex中的值:

  • vuex在vue3中的使用异同可以到另一篇博客了解更多详情: vue3.2开发:vuex在vue3与vue2中异同之快速体验

2. watchEffect函数

  • watchEffect与computed相似:

    • 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
    • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
  • watch的套路是:既要指明监视的属性,也要指明监视的回调。

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

组件注册

  • 组件注册与vue2有明显的区别,vue3中是defineComponent和app.componnent。

局部注册



全局注册

main.js:

import son from '/pages/index/components/son.vue'
export function createApp() {
	const app = createSSRApp(App)
	app.component('my-son',son)
	app.use(store)
	return {
		app
	}
}

组件中使用:


组件传值

1. props/emit

  • vue3.2子组件中使用defineProps接受父组件的值,使用defineEmits向父组件传递方法。

父组件father.vue



子组件son.vue



provide/inject

  • provide/inject算是props的加强版,父组件用provide 提供数据,所有子组件可以通过inject获取这些数据,父组件不需要知道哪些子组件使用它provide的数据。

基本套路:

// 父组件中
provide('值',值);

// 子组件中
const v = inject('值');

注意:

  • provide也可以传递普通数据,但是传递ref或reactive定义的数据才具有响应性。
  • 不同于props,provide是双向数据流,即可以在子组件里修改父组件传递过来的值。
  • 如果不想让子组件修改父组件传递的值,使用readonly,下面有示例。

父组件father.vue



子组件son.vue



孙组件grandChild.vue



readonly


style样式使用v-bind绑定动态值

  • 以前在做项目的时候,有场景就想着style中可以绑定js中的动态值,没想到vue3.2中就支持了,爽歪歪!

  • v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。

    带颜色的文字

获取路由信息

注意: uniappp中获取路由信息的方式不能用useRoute和useRouter,官方给出的方案是用getCurrentPages,如下:


vue-cli脚手架搭建的项目可以使用useRoute和useRouter,如下:


全局API的转移

1. vue2.x中部分全局API和配置

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

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: ''
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

2. vue3.x中对这些API做出了调整

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

2.x 全局 API(Vue

3.x 实例 API (app)

Vue.config.xxxx

app.config.xxxx

Vue.config.productionTip

移除

Vue.component

app.component

Vue.directive

app.directive

Vue.mixin

app.mixin

Vue.use

app.use

Vue.prototype

app.config.globalProperties

Composition API 的优势

1. vue2.x中的Options API 存在的问题

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuTtLori-1646783877487)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84e4e2c02424d9a99862ade0a2e4114~tplv-k3u1fbpfcp-watermark.image “Options API 存在的问题演示1”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DoBerBta-1646783877488)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5ac7e20d1784887a826f6360768a368~tplv-k3u1fbpfcp-watermark.image “Options API 存在的问题演示2”)]

1. vue2.x中的Composition API的优势

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5Wu27v1-1646783877489)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc0be8211fc54b6c941c036791ba4efe~tplv-k3u1fbpfcp-watermark.image “Composition API的优势演示1”)]

----- 看完啦别忘记点赞哟,您的赞就是对我最大的肯定 END -----


关注我,不迷路

如果任何疑问的可以在评论区留言或者私聊。

也可以扫下面二维码加我wx,备注‘地区-名字-技术类型’,我会拉进我的微信技术分享群。注意:必须备注清楚哈。

也可以加QQ群交流:568984539,加群备注‘地区-名字-技术类型’。

更多前端、uniapp、nodejs等相关知识可关注我个人博客:https://blog.csdn.net/qq_42961150spm=1011.2124.3001.5343

3

你可能感兴趣的:(前端,html,vue.js,前端,javascript)