Vue 实战实用技术点(1)

• 给 props 属性设置多个类型

• 阻止 `` 默认提交行为

• data 初始化

• template

• Lifecycle hook

• v-for

• render 函数

• errorCaptured

• v-once

• slot-scope

给 props 属性设置多个类型

==============================================================================

这个技巧在开发组件的时候用的较多，为了更大的容错性考虑，同时代码也更加人性化：

export default {

props: {

width: {

type: [String, Number],

default: ‘100px’

}

// 或者这样

// width: [String, Number]

}

}

比如一个 <my-button> 上暴露了一个 width 属性，我们既可以传 100px，也可以传 100 ：

{{ computedWidth }}

使用：

阻止 <el-form> 默认提交行为

===================================================================================

有时候我们在用饿了么组件 <el-form> 在文本框中键入 enter 快捷键的时候会默认触发页面刷新。我们可以加入如下代码解决其默认行为：

<el-form @submit.native.prevent>

…

data 初始化

======================================================================

因为 props 要比 data 先完成初始化，所以我们可以利用这一点给 data 初始化一些数据进去，看代码：

export default {

data () {

return {

buttonSize: this.size

}

},

props: {

size: String

}

}

【我在想，这个的意义在哪里，props 里面的数据不就是可以直接用吗？知道的告诉我一下，谢谢。】

除了以上，子组件的 data 函数也可以有参数，且该参数是当前实例对象。所有我们可以利用这一点做一些自己的判断。如，改写上面的代码：

export default {

data (vm) {

return {

buttonSize: vm.size

}

},

props: {

size: String

}

}

template

======================================================================

我们在做 v-if 判断的时候，可以把判断条件放在 template 组件上，最终的渲染结果将不包含 元素。

...

...

v-for 也同样适用。

Lifecycle hook

============================================================================

生命周期钩子可以是一个数组类型，且数组中的函数会依次执行。

export default {

…

created: [

function one () {

console.log(1)

},

function two () {

console.log(2)

}

]

…

}

没什么用，知道就行了。事实上生命周期钩子还可以作用于 DOM 元素上，利用这一点，我们可以用父组件中的方法来初始化子组件的生命周期钩子：

I'm child!

<child @hook:created=“handleChildCreated”>

其他钩子雷同，不再赘述。

v-for

===================================================================

在用 v-for 遍历数组的时候，我们一般都会错误的这样去做，举个栗子：

v-for 和 v-if 放在同一个元素上使用：

v-for=“(user, index) in users”

v-if=“user.isActive”

:key=“user.id”>

{{ user.name }}

由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响，官方给出的建议是在计算属性上过滤之后再进行遍历。所以平时开发不推荐一起使用，知道有这回事即可，不至于面试时不知道。 关于为什么不推荐放在一起使用，参见 避免-v-if-和-v-for-用在一起。

render 函数

=======================================================================

下面是一段简单的 template 模板代码：

title

this is content

我们用 渲染函数 来重写上面的代码：

export default {

render (h) {

let _c = h

return _c(‘div’,

{ class: ‘box’},

[_c(‘h2’, {}, ‘title’), ‘this is content’])

}

}

事实上，Vue 会把模板(template)编译成渲染函数(render)，你可以通过一个在线工具 实时查看编译结果。上面的 template 模板会被编译成如下渲染函数：

let render = function () {

return _c(‘div’,

{staticClass:“box”},

[_c(‘h2’, [_v(“title”)]), _v(“this is content”)])

}

是不是很像？ 正如官方说的，渲染函数比 template 更接近编译器。如果用一个流程图来解释的话，大概是这个样子：

template

↓

预编译工具（vue-loader + vue-template-compile）

↓

render

↓

resolve vnode

具体参见 Vue声明周期图示

渲染函数用处：

• 开发组件库，Element 源码用的都是 render

• 封装一些高阶组件。组件里面嵌套组件就是高阶组件，前提是要满足组件三要素：props、event、slot

• 用于处理一些复杂的逻辑判断。如果我们一个组件里面有很多 v-if 判断的话，用模板就显得不合适了，这个时候可以用渲染函数来轻松处理

errorCaptured

===========================================================================

捕获一个来自子孙组件的错误时被调用。有时候当我们想收集错误日志，却不想把错误暴露到浏览器控制台的时候，这很有用。下面是个例子：

Child.vue

Parent.vue

关于 errorCaptured 更多说明，请 移步官网->

选项-生命周期钩子

v-once

====================================================================

通过 v-once 创建低开销的静态组件。渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：

用户协议

… a lot of static content …

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。关于 v-once 更多介绍，请 移步官网->。

slot-scope

========================================================================

作用域插槽。vue@2.5.0 版本以前叫 scope，之后的版本用 slot-scope 将其代替。除了 scope 只可以用于 <template> 元素，其它和 slot-scope 都相同。

用过 Element 组件的同学都知道，当我们在使用 <el-table> 的时候会看到如下代码：

Element@1.4.x 的版本：

<el-button

size=“small”

@click=“handleEdit(scope.$index, scope.row)”>编辑

<el-button

size=“small”

type=“danger”

@click=“handleDelete(scope.$index, scope.row)”>删除

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

type=“danger”

@click=“handleDelete(scope.$index, scope.row)”>删除

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Vb9wLHPf-1715655119904)]

[外链图片转存中…(img-B5LENSBu-1715655119905)]

[外链图片转存中…(img-uGa5OBgX-1715655119905)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！