Vue API 零碎知识整理

最近抽空重新看了一遍Vue官网的API，对一些经常使用的、经常忘记用法的、经常错用的API进行了梳理，并以个人学习笔记的形式记录，以降低再次阅读的成本和提高查阅文档的效率

写在前面

为获得最佳的阅读体验，可访问本人笔记原文地址 Vue API碎片知识整理

ignoredElements

vue.config 配置
忽略在Vue 之外的自定义元素，如微信的开放标签 wx-open-tag; 否则会报组件未注册的警告

data

组件data 必须返回一个函数（尽量不要使用箭头函数），否则data会被所有实例共享
Vue 会递归将data的property 转换为getter/setter —> 从而让data成为响应式数据
创建根实例之前，声明所有的响应数据，后续将无法在data上添加响应式属性
以 _ 或 $ 开头的属性不会被Vue实例代理，因为他们可能和Vue内置的属性、API方法冲突

props

props可以通过数组的方式指定：props:['name','code'] 但是并不推荐，最好是通过对象形式，规范props 的类型，默认值，校验规则等
props如果类型为对象或函数，则其默认值必须由工厂函数生成
只为props 指定类型时支持 name:String 快捷写法

computed

最好不要使用箭头函数: —> this 指向问题
计算属性会被混入到Vue实例中，所有的getter 和 setter 的this上下文自动成为Vue 实例
计算属性会被缓存，除非依赖的响应式属性变化

watch

最好不要使用箭头函数: —> this 指向问题
handler 可以使用数组(每个元素都是一个方法），里面的方法会依次调用

生命周期

beforeCreated : 实例初始化之后，data数据，event事件，watcher配置之前调用。
created：实例创建完成后调用，data数据，event事件，watcher，property,method配置完成，但是尚未挂载，$el 尚不可用。
**beforeMount: 挂载开始之前调用，render函数首次执行 **。

该钩子函数在服务端渲染时不可用
mounted: 实例挂载后调用，el已经被vm.$el替换；

el：挂载vue的dom元素，通常是元素id或者class 类名；最常见的是vue项目中index.htmlx中对应的id=app 元素

mounted 不会保证所有的子组件都一起被挂载，如果你希望等到整个视图都渲染完毕，可以在moubted钩子函数中使用vm.$nextTick
beforeUpdate: 数据更新之前调用，发生在虚拟Dom 打补丁之前，这里只适合在更新之前访问现有的dom,比如手动移除已经添加的事件监听器

该钩子函数在服务端渲染期间不会被调用，只有初次渲染会在服务端进行
updated: 数据更新完成后调用，此时dom已经更新，应该避免在此期间更改状态，如果必须最好使用计算属性或者watcher

该钩子函数服务端渲染不可用

updated不会保证所有的子组件都一起被挂载，如果你希望等到整个视图都渲染完毕，可以在updated钩子函数中使用vm.$nextTick
activated: 被keep-alive 缓存的组件被激活时调用

该钩子函数服务端渲染时不可用
beforeDestroy: 实例销毁之前调用

该钩子函数服务端渲染时不可用

destroyed: 实例销毁后调用

该钩子函数服务端渲染时不可用

父子实例访问

子实例可以通过$parent 访问父实例
父实例可以通过$children 访问所有子实例
节制的使用$parent $children

mixins

混入Vue实例的属性、方法、生命周期等
被混入的钩子函数（生命周期）将优先执行
混入相同的属性、方法会报错

不建议在日常业务代码中使用

provide / inject

主要在开发高阶组件时使用，并不推荐用于普通应用程序开发

允许祖先组件向其所有子孙组件注入一个依赖
vue2.2.1 以上的版本，注入的值会先于data 和props得到

provide / inject 的绑定不是可响应的，然而你传入了一个可监听的对象，那么其对象的property还是可响应的

name

组件名，方便调试时的错误定位和更好的语义化

设置组件名的好处就是可以递归使用

vm.$options

创建自定义property

嗯！Vue实例还支持创建自定义property

new Vue({customProperty:"www",                              //像这样定义created:function(){console.log(this.$options.customoProperty)       // 像这样访问     }
})

vm.$slots

用于访问插槽分发的内容

插槽不是响应性的，如果需要组件在传入数据改变时重新渲染建议采用data或者props

vm.$attrs

高阶组件时使用，透传props属性
通过v-bind="$attrs"的形式使用

vm.$listeners

高阶组件时使用，透传事件监听，类似$attrs
通过v-on = $lisenters 的形式使用

vm.$watch

deep ：深度监听对象内部属性的变化【数组的时候不需要】
immediate ：立即以当前值触发回调，此时 oldval = newVal

使用此属性不能在第一次回调时取消对指定property的监听
$watch 会返回一个取消监听的函数，用来停止触发回调

var unwatch = vm.$watch('a',cbfun)unwatch() // 取消监听

vm.$forceUpdate

强制刷新Vue实例。注意它仅仅影响实例本身和插入插槽内容的组件，而不是所有子组件

vm.$nextTick

在下一次dom更新完成后执行回调，回调里面访问的是最新的dom

v-show / v-if

v-show控制组建的display属性
v-if 控制组建的创建与销毁

v-for

v-for 的默认行为会尝试原地修改元素而不是移动它们，要强制其重新排序，可通过绑定key值来提供排序提示

v-for 的优先级比v-if 高

动态样式绑定 `:class` `:style`

:class = "[ classA , classB ]"             // 数组形式：同时绑定样式A、B
:class = "{ classA: flag }"                // 对象形式：满足条件（flag 为 true）才绑定样式A
:class = "[ classA , { classB : flag } ]"   // 数组形式和对象形式的结合

:style = "{ width : width + 'px' }"
:style = "[ styleA , styleB ]"          // 推荐使用计算属性来求解元素的最终样式

Vue 2.0 官网 API 零碎知识整理相关推荐

React官网API模块知识点整理（三）
react版本:16.13.1 1.React 顶层 API React.Component React.Component 是使用 ES6 classes 方式定义 React 组件的基类 Reac ...
(附源码)基于vue框架潮牌官网设计与实现毕业设计010955
摘要随着社会的发展,计算机的优势和普及使得潮牌官网的开发成为必需.潮牌官网主要是借助计算机,通过对首页.站点管理(轮播图.公告栏)用户管理(管理员.注册用户)内容管理(潮流资讯.资讯分类)商城管理 ...
基于vue框架潮牌官网设计与实现毕业设计源码010955
摘要随着社会的发展,计算机的优势和普及使得潮牌官网的开发成为必需.潮牌官网主要是借助计算机,通过对首页.站点管理(轮播图.公告栏)用户管理(管理员.注册用户)内容管理(潮流资讯.资讯分类)商城管 ...
（附源码）基于vue框架潮牌官网设计与实现毕业设计010955
摘要随着社会的发展,计算机的优势和普及使得潮牌官网的开发成为必需.潮牌官网主要是借助计算机,通过对首页.站点管理(轮播图.公告栏)用户管理(管理员.注册用户)内容管理(潮流资讯.资讯分类)商城管理 ...
（附源码）基于vue框架潮牌官网设计与实现毕业设计 010955
摘要随着社会的发展,计算机的优势和普及使得潮牌官网的开发成为必需.潮牌官网主要是借助计算机,通过对首页.站点管理(轮播图.公告栏)用户管理(管理员.注册用户)内容管理(潮流资讯.资讯分类)商城管 ...
Away3D 4.0官网教程(翻译)
使用Away3D 4.Stage3D 创建3D游戏和应用程序 (此帖每天都会更新,一定让大家完全的搞明白) 补充区: 'vase.awd' 可以使用 Prefab3D打开(在帖子后面回复 ...
Python 技术篇-20行代码实现微信机器人斗图功能实例演示！斗图啦官网API调用方法
话不多说,看效果图: 先说下原理: 微信接收到你说的话,发给机器人来回复,用回复的话传参给斗图网,然后获得斗图网返回的图片,保存后把图片再发给跟你斗图的人. 斗图啦官网API调用文档斗图啦官网菜单 ...
基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
Clear Case V7.0 官网下载地址
clear case 7.0官网下载地址改变 https://www14.software.ibm.com/webapp/iwm/web/reg/download.do?source=RATL-RAT ...

Vue 2.0 官网 API 零碎知识整理

Vue API 零碎知识整理

写在前面

ignoredElements

data

props

computed

watch

生命周期

父子实例访问

mixins

provide / inject

name

vm.$options

vm.$slots

vm.$attrs

vm.$listeners

vm.$watch

vm.$forceUpdate

vm.$nextTick

v-show / v-if

v-for

动态样式绑定 `:class` `:style`

Vue 2.0 官网 API 零碎知识整理相关推荐

最新文章

热门文章

Vue 2.0 官网 API 零碎知识整理

Vue API 零碎知识整理

写在前面

ignoredElements

data

props

computed

watch

生命周期

父子实例访问

mixins

provide / inject

name

vm.$options

vm.$slots

vm.$attrs

vm.$listeners

vm.$watch

vm.$forceUpdate

vm.$nextTick

v-show / v-if

v-for

动态样式绑定 :class :style

Vue 2.0 官网 API 零碎知识整理相关推荐

最新文章

热门文章

动态样式绑定 `:class` `:style`