Unsplash
-
class 和 style 使用动态属性，使用驼峰式写法
-
v-if和v-show
v-if不渲染不满足判断条件的模块，v-show渲染但不显示，使用场景：是否多次切换或频繁更新条件状态 -
keep-alive 缓存组件，使用场景：频繁切换，不需要重复渲染
-
v-for中添加唯一的key
为了高效的更新虚拟 DOM，会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素，添加方式：key="'list_' + index" -
mixin抽离多个组件里的公共逻辑
缺点：变量来源不明确，不利于代码阅读；多个mixin可能会造成命名冲突；mixin和组件可能会出现多对多关系，复杂度高 -
$nextTick
Vue 是异步渲染，data改变后，DOM 不会立刻渲染，页面渲染时会将data的做整合，$nextTick会在 DOM 渲染完之后执行延迟回调，减少 DOM 操作次数，提高性能 -
组件
data为什么返回函数
两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰
Component.prototype.data = {
message: 'hello'
}
Component.prototype.data = function() {
return {
message: 'hello'
}
}
-
组件化
传统组件，只是静态渲染，更新还要依赖于操作 DOM
Vue MVVM 数据驱动视图，修改 Model 数据；ViewModel 监听事件、指令；View 渲染 -
动态组件
:is
// 列表页：轮播图、文章、视频、图片
<div v-for="(item, index) in newsData" :key="index">
<component :is="item.type"/>
</div>
- 异步组件
import
comments: {
Tab: () => import('../comments/Tab')
}
-
计算属性和侦听器
computed有缓存，data不变则不会重新计算，监听值类型可正常拿到oldVal
watch一般用于监听数据变化的同时，进行异步操作或者是比较大的开销，监听引用类型拿不到oldVal，因为指针相同，此时已经指向了新的Val -
Vue 生命周期（创建、挂载、更新、销毁）
beforeCreate
created页面还没有渲染，但 Vue 实例已经初始化了，可以调用methods中的方法、改变data中的数据，使用场景：发送请求获取数据
beforeMount
mounted页面已经渲染完毕，可以获取到el中的 DOM 元素，进行 DOM 操作
beforeUpdate
updated
beforeDestroy清除定时器、自定义事件
destroyed -
父子组件创建、更新顺序
父组件created子组件created子组件mounted父组件mounted
父组件beforeUpdate子组件beforeUpdate子组件updated父组件updated -
组件之间的传值通信
父组件给子组件传值通过props
子组件给父组件传值通过$emit触发回调
其他组件通信，通过实例一个Vue实例event作为媒介，要相互通信的组件之中，都引入event -
动态路由配置（路由懒加载）
{
path: '/user/:id',
component: () => import('../components/User')
}
- vue-router 路由模式
hash模式url多了#号，它的特点在于：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，不需要后台进行配置，因此改变hash不会重新加载页面
history模式 利用了pushState()和replaceState()方法，history模式改变了路由地址，因为需要后台配置地址
History.pushState() 方法用于在历史中添加一条新记录，浏览器地址栏立刻显示新地址，但并不会跳转，它只是成为浏览历史中的最新记录
History.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个
- 事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThis"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在event.target是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThis">...</div>
- 表单部分
<template>
<p>输入框:{{name}}</p>
<input type="text" v-model.trim="name"/>
<input type="text" v-model.lazy="name"/>
<input type="text" v-model.number="age"/>
<p>多行文本：{{desc}}</p>
<textarea v-model="desc"></textarea>
<p>复选框{{checked}}</p>
<input type="checkbox" v-model="checked"/>
<p>多个复选框{{checkedNames}}</p>
<input type="checkbox" id="beijing" value="beijing" v-model="checkedNames"/>
<label for="beijing">北京</label>
<input type="checkbox" id="shenzhen" value="shenzhen" v-model="checkedNames"/>
<label for="shenzhen">深圳</label>
<input type="checkbox" id="guangzhou" value="guangzhou" v-model="checkedNames"/>
<label for="guangzhou">广州</label>
<p>单选{{gender}}</p>
<input type="radio" id="male" value="male" v-model="gender"/>
<label for="male">男</label>
<input type="radio" id="female" value="female" v-model="gender"/>
<label for="female">女</label>
<p>下拉列表选择{{selected}}</p>
<select v-model="selected">
<option disable value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>下拉列表选择(多选){{selectedList}}</p>
<select v-model="selectedList" multiple>
<option disable value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</template>
<script>
export default {
data() {
return {
name: '年糕',
age: 17,
desc: 'lalalala',
checked: true,
checkedNames: {},
gender: 'male',
selected: '',
selectedList: []
}
}
}
</script>
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
网友评论