Vue代码的实用技巧有哪些

本篇内容介绍了“Vue代码的实用技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联建站2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元潮南做网站,已为上家服务,为潮南各地企业和个人服务,联系电话:028-86922220

slots 新语法向 3.0 看齐

❝使用带有“#”的新命名插槽缩写语法,在Vue 2.6.0+中可用?❞

举个例子:

构建插槽时，最好规划一下布局。这就是我的文章布局。

构建插槽与构建组件没有什么不同。本质上，插槽是具有超强功能的组件,让我们细分一下上面的布局，组件的外观如下：

              
I am the content
                                                      
I am the banner
            //简写   Default slot  

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null  值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

  ... 

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

@hook那些事

处理组件内定时器的步骤。通常我们一般都是这样操作的：

但是其实更好的做法是：

设想一个场景如果我们需要在数据渲染到页面的之前让页面 loading。mounted 之后停止loading。beforeUpdata 时开始  loading。updatad 之后停止 loading。

最简单的方法就是改写组件的生命周期函数，使其在 mounted/beforeUpdata /updatad时通知父组件显示或者隐藏  loading。

这样做显示不好，因为侵入了自组件的逻辑，增加的逻辑也和组件本身的功能好不关联。最好的办法就是使用 v-on="hook:xxx" 的方式：

这样，就实现了对子组件生命周期的监听。对任意的组件都有效果，包括引入的第三方组件。

vue中的$props、$attrs和$listeners(可用来二次封装组件)

❝$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。❞

假如有个input输入框。我们有很多的原生属性，比如：name、placeholder、disabled等等。我们如果都定义在props显示接收，未免太过繁琐。所以官网出现了：v-bind="$props"这样的操作。如果父组件传递很多的原生属性，那么我们在子组件中直接可以：

//good    //bad //而不是下面这样，如果很多的属性就特别繁琐 

❝我们可以利用以下方式$attrs 将原生属性直接传递给子组件,这是Vue在2.4.0新增的属性,包含了父作用域中不作为 prop 被识别 (且获取)  的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style  除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。❞

❝$listeners：包含了父作用域中的 (不含 .native修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"  传入内部组件——在创建更高层次的组件时非常有用。❞

如果子组件不在父组件的根目录下，则可以将所有事件侦听器从父组件传递到子组件，如下所示：

响应式数据(2.6.0新增)

我们习惯于用Vuex去解决状态的共享问题,但是在小项目中使用就会有增大代码体积和将代码复杂化的烦恼,所以在后来的版本中Vue新增

Vue.observable( object )让一个对象可响应,Vue 内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和 计算属性 内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

官方示例:

const state = Vue.observable({ count: 0 })  const Demo = {   render(h) {     return h('button', {       on: { click: () => { state.count++ }}     }, `count is: ${state.count}`)   } }

jsx模板组件

以下面的一组状态判断按钮为例,我们很容易就下意识地在模板内写下这种代码

未开始 进行中 可领取 已领取

但是如果我们利用渲染函数可以将上面的代码抽取成优雅的使用组件