Vue核心技术总结思维导图模板_ProcessOn思维导图、流程图

Vue核心知识

实例

实例属性

$el
$render //页面重新渲染的时候触发
$date
$mount
$props
$options //在此设置data的值是不会生效的。

$children
$root
$slots
$refs
$isServer

实例方法

$watch和实例里的watch属性是一样的。区别是，$watch需要手动注销。

$on,$emit 事件的接受和触发在同一个实例上才会生效
$once事件只执行一次。

$forceUpdate(),强制渲染
$set(app.obj, 'a','123') //新增属性a并赋值
$delete可以彻底把属性删掉

vm.$nextTick([callback]) //下一次渲染的时候，执行

$set, $forceUpdate()
使用场景

问题

vue实例的data中有一个obj：{}，
给obj的属性新增属性，值会改变，但是不会重新渲染

原因

因为 vue 无法监听新增的属性，只能监听你修改属性，除非你开始就指定了相关属性，哪怕是 undefined.

解决办法

$forceUpdate()

强制重新渲染

$set()

Vue.set( target, propertyName/index, value )

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

https://cn.vuejs.org/v2/api/#Vue-set-target-propertyName-index-value

参考

$set,$delete,$forceUpdate()的使用
https://www.jianshu.com/p/7412bea4e720

1.$set给data对象中的变量设置值，比如我在data中定义了一个对象，在使用的时候我想给这个对象赋予一个a的属性，
var app = new Vue({
el:"#main",
template:'<div>{{obj.a}}</div>'
data:{
obj:{}
}
})
var i=0;
i++;
app.$set(app.obj,'a',i)
语法糖[vm.$set( target, key, value )]

2、$delete删除对象的属性
app.$delete(app.obj,'a')

3、$forceUpdate()强行更新vue实例
在data中声明了obj对象，但并没有a的声明
setInterval(()=>{
var i=0；
i++；
app.obj.a=i;
},1000)
console.log(app.obj.a)
但是在页面中并不会显示出a的值，但是a的值在一直改变,console会打印出来，这中方法a的值并没有在data中事先声明，不能显示在页面，如果想显示出来，也可以在声明obj的时候，给a声明一个空值。
在data中声明的对象的属性并没有声明，但是调用了，这是非响应式，不会重新渲染
方法二：
使用app.$forceUpdate()，强行更新vue实例
var app = new Vue({
el:"#main",
template:'<div>{{obj.a}}</div>'
data:{
obj:{}
}
})
setInterval(()=>{
var i=0；
i++；
app.$forceUpdate(app.obj,'a',i)
},1000)
console.log(app.obj.a)
$forceUpdate该方法会重新给obj的a属性重新声明，在页面就能显示出来了，但是这种方法不建议使用，如果要使用到a的值，可以先声明一个空值

$nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

https://cn.vuejs.org/v2/api/#Vue-nextTick

生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

errorCaptured

可以向上冒泡，能够捕获组件自身和子组件中的render异常
可以使用在生产环境

数据绑定

:class
:style
v-html

:class

https://cn.vuejs.org/v2/guide/class-and-style.html

语法

对象语法

数组语法

混合

computed和watch

computed

当app里面的任意属性发生变化时，template会重新渲染。当template通过computed方法获取值时，只有computed 监听的属性发生变化时，才会重新调用函数，否则computed会取缓存里面的值；当template是通过methods里面的方法获取值时，只要app的任意属性发生变化，都会调用函数。所以，template相对于通过methods里面的方法获取值，通过computed获取值性能会更高。

watch

immediate:true

先执行一遍监听，而不用等数据发生变化再监听

deep：true

wacth想监听对象内部属性变化时，可以使用deep：true 或者换成字符串格式监听：obj.a -> 'obj.a'，推荐使用后者

注意

尽可能不要修改wacth和computed的值，避免造成死循环。

原生指令

常用指令

v-bind：可缩写为：,绑定某个属性
v-on 可缩写@,绑定某个事件

v-text,绑定标签的文本，标签内部只能显示绑定的值，不如{{}}灵活
v-html，把变量的内容作为html插入节点

v-if,根据值来定义节点，节点不存在，只是被加入或删除，动态增删节点
v-if-else 和if结合使用
v-else 和if结合使用，最终不符合情况的结果

v-show,赋值bool来，显示/隐藏节点，节点本来存在，只是被隐藏了，其实就是在节点上加display

v-for

v-for='(item,index) in arr'

v-for='(val,key,index) in obj'

:key

v-model

在input上使用

修饰符

.number

.lazy

.trim

其他不常用指令

v-pre

v-cloak

v-once

首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示。

组件

定义

组件定义

components里，用PascalCase形式

使用自定义的组件时，用kebab-case形式

组件定义的data

data必须是function

props

定义时，用PascalCase形式

使用时，用kebab-case形式，这种形式比较规范
也可以写PascalCase形式，遵循团队编码规范即可

注意

不能直接修改prop

继承

extend

this.$parent

this.$parent.$options.name
this.$parent.data1
获取修改父组件的内容，
最好不要修改，容易造成逻辑混乱，多层渲染

双向绑定

v-model

高级属性

<slot>插槽

具名插槽 name

作用域插槽 slot-scope

provide 祖先组件
inject 子孙组件

render function

name可以是组件名字，也可以是dom节点

props 可以传递attr ref等

render(createElement) {
return createElement('name', {props}, [子组件])
}

三种写组件方式：

template

render function

jsx

Vue-Router

vue-router的使用

routes

/ 是默认路由

router

使用vue-router

Vue.use(VueRouter)

<router-view>
展示路由的页面

<router-view>

匹配到的路由页面，会展示在router-view里

命名路由

在.vue文件中引入多个<router-view>时可以使用name命名
<router-view name="aaa"/>
在routes.js文件中写路由compnents:{default:组件一，aaa:组件二}

Router构建选项

mode:'history'

默认是hash模式
mode:'history'可以去掉#

base

设置基路径
跳转后，路由前会加上/base/，不加也可以

linkActiveClass:
linkExactActiveClass:'

链接被激活时显示什么样式

scrollBehavior(to, from,savedPosition){}

定义路由跳转时的滚动行为

parseQuery(query){}
stringifyQuery(obj){}

处理url中的query

路由项

name

给路由命名