vue3语法糖[vue3语法糖获取uniapp传过来的路由参数]

作为虚拟币行业人士而言，我们经常都会说到vue3语法糖时有很多细节是需要注意的。你知道vue3语法糖获取uniapp传过来的路由参数？今天就让小编跟你们说说吧！

根据原文内容的更新的内容主要有以下 5 块：

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；

这样会导致在页面上变量会出现很多次。

很不友好，vue3.2只需在script标签中添加setup，可以帮助我们解决这个问题。

组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，

甚至是自定义指令也可以在我们的template中自动获得。

在 script setup 中，

引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!]

并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。

刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说:

那么子组件怎么接受父组件传递过来的值呢?

props，emit怎么获取呢?

别担心,新的api出现了,我们的主角 defineProps

父组件传递参数

子组件接受参数

子组件使用

父组件

子组件

父组件

v-memod会记住一个模板的子树,元素和组件上都可以使用。

该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。

如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。

即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。

因此渲染的速度会非常的快。

需要注意得是:正确地声明记忆数组是很重要。

开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。

v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。

只创建一次，以后就不会再更新了。也就是说用内存换取时间。

经过尤大大和团队的努力，style v-bind 已经从实验室毕业了。

我们可以使用这个属性了。爽歪歪！

我们可以在style中去使用变量。是不是感觉很牛逼呀！

现在我们用起来，第一次使用style v-bind

MVVM是 Model-View-ViewModel的缩写，

Model代表数据模型，定义数据操作的业务逻辑。

View代表视图层，负责将数据模型渲染到页面上。

ViewModel控制，通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。

1、增加了composition api

2、虚拟DOM重写

3、优化slots的生成

4、基于Proxy的响应式系统

5、TypeScript + 模块化

1、监控到数组下标的变化时，开销很大。所以Vue.js放弃了下标变化的检测；

2、Object.defineProperty只能劫持对象的属性，而Proxy是直接代理对象。

3、Object.defineProperty需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。

4、Object.defineProperty对新增属性需要手动进行Observe。vue2时需要使用 vm.$set 才能保证新增的属性也是响应式

5、Proxy支持13种拦截操作，这是defineProperty所不具有的

6、Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy，但 getter 和 setter 基本不会再有针对性优化

Vue实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom - 渲染、更新-渲染、卸载等一系列过程，我们称这是Vue的生命周期。

总共可以分8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后

生命周期的钩子函数：有8个常规钩子和2个额外的钩子 = 10个

第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子

1、beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。

data，computed，watch，methods 上的方法和数据均不能访问。

读法（D-Fo-kri?e?t?d）

2、created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。一般初始化事件和异步请求放在这里调用

3、beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。

beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、mounted：挂载完成创建vue实例，和双向绑定，挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。

5、beforeUpdate：数据更新前，数据驱动DOM。在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。

可在更新前访问现有的DOM，如手动移出添加的事件监听器。

6、updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新，可执行依赖的DOM操作。

注意：不要在此函数中操作数据（修改属性），会陷入死循环。

7、beforeDestroy：销毁前，可做一些删除提示，如：您确定删除xx吗？

8、destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。这时组件已经没有了，无法操作里面的任何东西了。

9、额外的钩子：activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。

如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。

10、额外的钩子：deactivated：组件被移除时使用。

1、执行顺序：

1）父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。

2）如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。

2、完成流程顺序

1）加载渲染过程：父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted

2）子组件更新过程：父beforeUpdate-子beforeUpdate-子updated-父updated

3）父组件更新过程：父beforeUpdate-父updated

4）销毁过程：父beforeDestroy-子beforeDestroy-子destroyed-父destroyed

3、概念：

1）当子组件挂载完成后，父组件才会挂载。

2）当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）

3）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。

4）销毁父组件时，先将子组件销毁后才会销毁父组件。

5）兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行

6）当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的

1、最大的改变就是setUp，setUp这个生命周期发生在beforeCreate和created之前。 两种形式的生命周期函数是可以共存，它们都会被执行。

2、其他都是大同小异，只不过换了写法前面加上了on 都写在setUp里面，在使用时需要按需引入函数

diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比，将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为0(N).

比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试；

如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；

借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。

vdom是一种使用js对象来描述真实DOM的技术，通过这种技术,们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。

computed:计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。

一个数据受多个数据影响

1、支持缓存，只有依赖数据发生改变，才会重新进行计算

2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化

watch:当需要在数据变化时执行异步或开销较大的操作时，一个数据影响多个数据

1、 不支持缓存，数据变直接会触发相应的操作；

2、watch支持异步；

methods:调用总会执行该函数，每次都会重新计算

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新

答：keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 比如说把某一个列表滑动到第100条位置，切换到一个组件后这次切换回该组件还会保持在100条的位置。

答：vue文件的一个加载器，将template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。 不写key 会导致所有列表DOM重新渲染，大大降低性能，同时编辑器也会报错。

答：当设置deep：true时，就可以深度监听到对象到内部值的变化。

答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。

答：delete只是被删除的元素成了空项，其他的元素键值还是不变。 Vue.delete 直接删除了数组，改变了数组的键值。

1、父传子：子组件通过props['xx'] 来接收父组件传递的属性 xx 的值 写法 ：key="数据"

2、子传父：子组件通过 this.$emit('fn',value) 来传递,父组件通过接收 fn 事件方法来接收回调 写法 ：@ 提交的事件 = 接收的函数

3、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

1、state：vuex的基本数据，用来存储变量

2、geeter：从基本数据(state)派生的数据，相当于state的计算属性

3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

1、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

2、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

1、vue-router 是什么?它有哪些组件？

答：vue用来写路由一个插件。有router-link、router-view， 重定向：redirect

2、vue-router 怎么定义动态路由? 怎么获取传过来的值？怎么获取当前的路由信息？

答：1）定义动态路由：在router目录下的index.js文件中，对path属性加上/:id。

2）获取传过来的值：使用router对象的params.id。

3）获取当前路由信息：使用this.$router获取当前的路由信息。 Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，ctx.$router 是 Vue Router 实例，currentRoute 可以获取到当前的路由信息

3、vue-router钩子函数有哪些？都有哪些参数？有哪些作用？

答：1）全局前置守卫：beforeEach((to, from, next)={})， 它接收3个参数，分别是 to：即将进入的路由对象。form：当前导航正要离开的路由。next()：进行管道中的下一个钩子

2）全局后置钩子：afterEach((to,form)={})

3）全局解析守卫：beforeResolve((to, from, next)={})

4）组件内导航钩子：beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不能获取组件实例 this// 因为当守卫执行前，组件实例还没被创建},

5）组件内导航钩子：beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用。// 可以访问组件实例 this},

6）组件内导航钩子：beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用 //可以访问组件实例 this}。

作用：vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。

4、vue中router与route区别

router：对象是全局路由的实例，是router构造方法的实例。比如 this.$router.push。 英标：[?ru?t?r , ?ra?t?r] 低音

route：对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 英标：[ru?t] 重音

5、vue-router的两种模式的区别

答：1）hash模式：地址栏后面带有#号，当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作，做到单页面无刷新

2）history模式：主要使用HTML5的pushState()和replaceState()这两个api来实现的，pushState()可以改变url地址且不会发送请求，replaceState()可以读取 历史 记录栈,还可以对浏览器记录进行修改

他们最大的区别：

hash模式的hashchange，只能改变#后面的url片段。

history模式则会将URL修改的就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误

6、vue-router实现路由懒加载（ 动态加载路由 ）的方式有哪些?

7、vue-router 传参

Params：只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空。

// 传递参数 this.$router.push({ name: Home， params: { number: 1 , code: '999' } }) // 接收参数 const p = this.$route.params

Query：参数会显示在路径上，刷新不会被清空name 可以使用path路径

// 传递参数 this.$router.push({ name: Home， query: { number: 1 , code: '999' } }) // 接收参数 const q = this.$route.query

Vue.js 是什么

vue3中的v-model，比较好用，其实不管是vue2还是vue3，都是用来进行数据表单的双向绑定的，只不过它的好用之处在于，他有自己的语法糖，就是有自己默认的绑定事件和属性，我们在父子通信的时候可以直接拿来使用！非常nice

Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？

不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。

uni-app 页面路由为框架统一管理的，我们需要在 page.json 文件里配置每个页面路由以及页面样式，有些类似小程序中的 app.json 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。

项目初始化完成，对应的 page.json 文件为：

uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：

uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。

1、navigator组件跳转

类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 page.json 中注册。

navigator 属性有：

open-type 有效值

2、uni-app API 跳转

使用 API 页面跳转方式有：

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

方式1：onLoad 接收

方式2：setup语法糖接收

onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。

看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：

????????Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。本次解释 self 修饰符以及self连缀的情况。

????????self 的作用是，只在目标Dom是绑定了动作的Dom才触发。栗子如下图。我给2号图层的捕获监听与3号图层的冒泡监听加上self修饰符。当我点击最里层的a标签时，控制台会输出 1 3 4 4 2 1 。 因为我们本次的目标Dom是4号a标签，所以我们绑定在2号与3号的监听在有self修饰时不触发。

? ? ? ? 同理当我们点击3号图层时，控制台会输出 1 3 3 2 1 。 这时，3号是目标Dom所以@click.self="log(3)"触发了。

? ? ? ? vue中事件修饰符时可以连缀的，修饰符的顺序有时会影响最终结果。例如prevent与self组合。如下图2,图3。prevent.self与self.prevent产生的结果是有差距的。self写在prevent前时，prevent会被self影响，只有我们直接点击这个目标时才会触发prevent。点击5号通过冒泡传递过来时，self拦截住了监听，后面的prevent也一起失效了。

? ? ? ? .stop也会因为连缀在self可能失效。

前端豆知识，很小却有用

感谢您阅读本篇对vue3语法糖的详细介绍，如果你对vue3语法糖获取uniapp传过来的路由参数还不够了解，想进一步学习关于vue3语法糖的知识，可以在本站首页搜索你想知道的！