Vue实例详解与生命周期
Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。
Vue实例初始化的选项配置对象详解
Vue实例的的data对象
data对象的类型:
- 类型是Object或者Function。
- 如果是组件对象中,data必须是Function类型。【后面学了组件后就明白了,暂时对组件先放放。】
实例:
// 创建普通的Vue实例
var vm = new Vue({data: data
})// 组件定义【后面会详细讲的】
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({data: function () { //这里必须是函数!!!!return { a: 1 }}
})
Vue实例的computed
- 官方的实例
var vm = new Vue({ data: { a: 1 }, computed: {// 仅读取,值只须为函数aDouble: function () {return this.a * 2},// 读取和设置aPlus: {get: function () {return this.a + 1},set: function (v) {this.a = v - 1}} } }) vm.aPlus // -> 2 vm.aPlus = 3 vm.a // -> 2 vm.aDouble // -> 4
methods
类型: { [key: string]: Function }
详细:
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
- 示例:
var vm = new Vue({data: { a: 1 },methods: {plus: function () {this.a++}}
})
vm.plus()
vm.a // 2
watch
{ [key: string]: string | Function | Object }
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
var vm = new Vue({data: {a: 1,b: 2,c: 3},watch: {// 监控a变量变化的时候,自动执行此函数a: function (val, oldVal) {console.log('new: %s, old: %s', val, oldVal)},// 深度 watcherc: {handler: function (val, oldVal) { /* ... */ },deep: true}}
})
vm.a = 2 // -> new: 2, old: 1
//注意,不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.updateAutocomplete 将是 undefined。
参考综合案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之数据监控</title><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body><div id="app"><p>{{ number }}</p><input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()"></div><script>var app = new Vue({ el: '#app', data: { number: 1},methods: {// 事件响应方法的逻辑代码getNumber: function (e) {this.number += 1; // 不管是内联方法调用,还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app}},watch: {// 监控number的变化,并自动执行下面的函数number: function (val, oldVal) {console.log('val:' + val + ' - oldVal: ' + oldVal);}}});</script>
</body>
</html>
设置el的详解
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,也就是说Vue绑定数据到哪里去找。可以是CSS 选择器
,也可以是一个 HTMLElement实例
。
在实例挂载之后(生命周期的内容后面会详细讲的奥), 元素可以用 vm.$el 访问。
如果这个选项在实例化时有作用,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。
// 几乎所有例子都用到这个,所以就不再赘述
var app = new Vue({ el: '#app',...
});
Vue实例的生命周期
首先看看下面官网的一张生命周期的图,我做一下标注,看看整体的流程,后面我们上代码做一下效果。
Vue提供的可以注册的钩子都在上图片的红色框标注。
他们是:
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
在挂载开始之前被调用:相关的 render 函数首次被调用。
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
接下来我们做一个例子,看一下Vue中所有的生命周期怎么用的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之生命周期</title><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body><div id="app"><p>{{ number }}</p><input type="text" name="btnSetNumber" v-model="number"></div><script>var app = new Vue({ el: '#app', data: { number: 1},beforeCreate: function () {console.log('beforeCreate 钩子执行...');console.log(this.number)},cteated: function () {console.log('cteated 钩子执行...');console.log(this.number)},beforeMount: function () {console.log('beforeMount 钩子执行...');console.log(this.number)},mounted: function () {console.log('mounted 钩子执行...');console.log(this.number)},beforeUpdate: function () {console.log('beforeUpdate 钩子执行...');console.log(this.number)},updated: function () {console.log('updated 钩子执行...');console.log(this.number)},beforeDestroy: function () {console.log('beforeDestroy 钩子执行...');console.log(this.number)},destroyed: function () {console.log('destroyed 钩子执行...');console.log(this.number)},});</script>
</body>
</html>
再看一个综合的实战的例子,可能涉及到ajax和组件,不过先看一下vue的生命周期的例子的用法:
import Axios from 'axios' // 这是一个轻量级的ajax库,import是es6模块导入的语法。
export default { // 这是一个vue的模块,后面讲奥。name: 'app',components: {},data: function () {return {list: []}},mounted: function () { // 挂在完成后的生命周期钩子注册。this.$nextTick(function () { // 等待下一次更新完成后执行业务处理代码。Axios.get('/api/menulist', {// 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新params: {}}).then(function (res) {this.list = res.data}.bind(this))})}
}
Vue实例的全局配置
这一块都是一些小的知识点,我就不赘述了,直接copy 官网
Vue.config 是一个对象,包含 Vue 的全局配置。可以在启动应用之前修改下列属性:
silent
类型: boolean
默认值: false
用法:
Vue.config.silent = true //取消 Vue 所有的日志与警告。
optionMergeStrategies
类型: { [key: string]: Function }
默认值: {}
用法:
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option: 1 }) // Profile.options._my_option = 2 //自定义合并策略的选项。 //合并策略选项分别接受第一个参数作为父实例,第二个参数为子实例,Vue实例上下文被作为第三个参数传入。
devtools
类型: boolean
默认值: true (生产版为 false)
用法:
// 务必在加载 Vue 之后,立即同步设置以下内容 Vue.config.devtools = true //配置是否允许 vue-devtools 检查代码。开发版本默认为 true,生产版本默认为 false。生产版本设为 true 可以启用检查。
errorHandler
类型: Function
默认值: 默认抛出错误
用法:
Vue.config.errorHandler = function (err, vm) { // handle error } //指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。 //Sentry, an error tracking service, provides official integration using this option.
ignoredElements
类型: Array<string>
默认值: []
用法:
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ] 须使 Vue 忽略在 Vue 之外的自定义元素 (e.g., 使用了 Web Components APIs)。否则,它会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于 Unknown custom element 的警告。
keyCodes
类型: { [key: string]: number | Array<number> }
默认值: {}
用法:
Vue.config.keyCodes = { v: 86, f1: 112, mediaPlayPause: 179, up: [38, 87] } //给 v-on 自定义键位别名。
Vue的全局API
Vue的全局API提供大量的功能,我这里就给大家罗列几个常用的结果,其他的还是参考官网.
Vue.nextTick
语法: Vue.nextTick( [callback, context] )
参数:
{Function} [callback]
{Object} [context]
用法:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {// DOM 更新了
})
Vue.set
语法: Vue.set( object, key, value )
参数:
{Object} object
{string} key
{any} value
返回值: 设置的值.
Vue.compile
语法:
Vue.compile( template )
参数:
{string} template
- 用法:
```js
//在render函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
```
全局API总结
Vue实例与生命周期总结
Vue的实例封装的还是挺有艺术性的,很符合开发者的思维规范,它的生命周期也非常清晰,使用起来也非常方便。Vue确实一个好框架。
Vue事件处理
监听事件的Vue处理
Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻底。所以还是推荐大家使用的。
Vue提供了v-on
指令帮助我们进行事件的绑定。
基本的内联事件处理方法[官方demo]:
<div id="example-1"><!-- 为按钮绑定点击事件,执行counter += 1的任务。 --><button v-on:click="counter += 1">增加 1</button><p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({el: '#example-1',data: {counter: 0}
})
</script>
事件处理方法集成到Vue对象
内联的方式绑定的事件,只能处理简单的事件的处理逻辑。复杂的情况还是封装到js中最方便,也不容易出错。
Vue对象中可以添加methods属性,开发者可以把事件处理函数的逻辑放到methods中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue入门之动态显示表格</title><script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body><div id="app"><p>{{ number }}</p><input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber"><input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()"></div><script>var app = new Vue({ el: '#app', data: { number: 1},methods: {// 事件响应方法的逻辑代码getNumber: function (e) {this.number += 1; // 不管是内联方法调用,还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app}}});</script>
</body>
</html>
事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a>
按键修饰符
在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
事件绑定的简写
Vue中属性的绑定的简写直接是:
=== 'v-bind:'
而事件的缩写是直接变成@
. 也就是说: v-on:
=== @
看下面的例子:
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
事件绑定总结
Vue实例详解与生命周期相关推荐
- vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 详解servlet生命周期
详解servlet 生命周期(转载) Servlet 有良好的生存期的定义,包括如何加载.实例化.初始化.处理客户端请求以及如何被移除.这个生存期由 javax.Servlet.Servlet 接口的 ...
- vue实例、指令、生命周期
vue实例.指令.生命周期 本章重点 1.生命周期 2.插值 3.指令 一.创建一个实例vue实例 每一个vue应用都是通过vue函数创建一个新的vue实例开始的 语法: ver vm = new V ...
- 详解spring生命周期的扩展点
详解spring生命周期的扩展点,加速你追赶高手的脚步 详解spring生命周期的扩展点
- 微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
- 详解react生命周期
生命周期函数是指在某一特定时刻组件会自动调用执行的函数. react生命周期可分为3个阶段:挂载,更新及销毁. 在挂载前会先进行初始化过程,这个阶段组件会初始化自己的数据,如state.props. ...
- k8s 详解 pod 生命周期 容器探测(live and ready) 钩子函数 pod的重启策略
pause 容器, 每个pod的都有的根容器,评估pod 的健康状态,设置ip地址,ip+端口可以访问到指定的容器 pod pod 之间采用 flannel 通信 pod 定义 yaml 资源清单 一 ...
- maven详解之生命周期与插件
Maven是一个优秀的项目管理工具,它能够帮你管理编译.报告.文档等. Maven的生命周期: maven的生命周期是抽象的,它本身并不做任何的工作.实际的工作都交由"插件"来完成 ...
最新文章
- 计算机专业学生却被强迫工厂实习?结果发生意外手指被截肢,学校回应:会治到满意为止...
- 如何有效开展小组教学_高效课堂 有效教学 | 教育部专家到徐州市第三中学开展教研活动...
- 滴滴否认上海团队解散;雄安超前布局 5G;小米拆分独立品牌 | 极客头条
- 安装MySql报错(This application requires .NET Framework x.x.x)
- 《程序员代码面试指南》题目与题解列表
- 好学易懂 从零开始的插头DP(一)
- basler相机参数简要中文说明_Basler相机全部型号参数及特点
- NorthWind基本数据库添加问题
- 黑苹果系统完全移植新硬盘
- IOS 沙盒(sandbox)机制和文件操作
- Amber进行DNA建模详细步骤
- 服务器cpu性能最大值,服务器cpu性能排行
- 【论文】使用endnote进行论文引用插入
- d3.js 旋转图形_Mac平台上一款方便实用的图形编辑软件
- Bitlock手动锁定-可自适应移动驱动器脚本
- 移动开发程序员最大的悲哀是什么?
- 浅谈fastText中的N-gram特征
- Jquery ajax 提交表单
- 【ECCV2022】OSFormer: One-Stage Camouflaged Instance Segmentation with Transformers
- FDTD solutions
热门文章
- String常用方法API
- AT24C04 eeprom读写测试
- 荣耀3手机android 5.0吗,华为荣耀3的手机系统是什么?华为荣耀3能升级安卓4.3吗?...
- 超牛逼!这款开源性能监控系统真强大~
- 朴素贝叶斯分类、半朴素贝叶斯分类算法
- 工具篇:Git与Github+GitLib常用操作(不定期持续更新)
- 北航计算机学院王华峰,计算机前沿科学与技术分论坛第二场宣讲会
- JavaScript 随机正数或负数
- 黑发黑眼 hdu2147
- JSON的parse()方法