Vue全家桶--09 生命周期和 Ajax 服务端通信
9.1 Vue实例生命周期
生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程
生命周期分为三大阶段：初始化显示、更新显示、销毁Vue实例
初始化阶段的钩子函数：
beforeCreate() 实例创建前：数据和模板均未获取到
created() 实例创建后: 最早可访问到 data 数据，但模板未获取到
beforeMount() 数据挂载前：模板已获取到，但是数据未挂载到模板上。
mounted() 数据挂载后： 数据已挂载到模板中
更新阶段的钩子函数：
beforeUpdate() 模板更新前：data 改变后，更新数据模板前调用
updated() 模板更新后：将 data 渲染到数据模板中
销毁阶段的钩子函数：
beforeDestroy() 实例销毁前
destroyed() 实例销毁后
生命周期图示
DEMO
<body> <div id="app"> <h1>{{ msg }}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> var vm = new Vue({ //el: '#app', data: { msg: 'heloo' }, beforeCreate() { console.log('beforeCreate()', this.$el, this.$data) }, created() { // 已初始化 data 数据，但数据未挂载到模板中 console.log('created()', this.$el, this.$data) }, beforeMount() { // 模板已获取到，但是数据未挂载到模板上 console.log('beforeMount()', this.$el, this.$data) }, mounted() { // 编译完成 ，数据已挂载到模板中 console.log('mounted()', this.$el, this.$data) }, beforeUpdate() { // 当 data 改变后，去更新模板中的数据前调用 // 注意：浏览器问题，需使用 this.$el.innerHTML 获取更新前的 Dom 模板数据 console.log('beforeUpdate()', this.$el.innerHTML, this.$data) }, updated() { // data 被 Vue 渲染之后的 Dom 数据模板 console.log('updated()', this.$el.innerHTML, this.$data) }, beforeDestroy() { console.log('beforeDestroy'); }, destroyed() { console.log('destroyed'); } }).$mount('#app'); // 实例中未使用 el 选项，可使用$mount()手动挂载 Dom // vm.$destroy() 销毁 Vue 实例 </script> </body>
9.2 liveServer服务端插件
1. 在 VS Code 中安装 liveServer 服务端插件，用于 Ajax 接口调用
2. 启动服务器：
方式1：任意打开一个 html 页面，在最下面可看到 GoLive 点击启动，默认端口5500
方式2：在 html 页面单击右键 ，点击如下，访问页面
注意：如果之前启动过服务器，则使用 方式2 启动html页面，不能使用 方式1 会端口占用
3. 更改 liveServer 默认端口号：
按 Ctrl + , 打开 Settings ，如下操作，打开 settings.json,
再json文件中添加 "liveServer.settings.port": 8080,
9.3 Vue中常用的ajax库
目前 Vue 官方没有内置任何 ajax 请求方法
1 vue-resource
在 vue1.x 版本中， 被广泛使用的非官方 Vue 插件 vue-resource
2 axios
在 vue 2+ 版本中，官方推荐使用非常棒的第三方 ajax 请求库
使用：结合生命钩子获取数据，渲染数据 created()
9.4 vue-resource的使用
参考手册：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
npm安装命令： npm install vue-resource
<body> <div id="app"> <ul> <li v-for="(item,index) in msg" :key="index">{{item.name}}</li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-resource/dist/vue-resource.js"></script> <script> new Vue({ el: '#app', data: { msg: [] }, created() { this.$http.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then((response) => { // 如果要使用Vue实例的this，此处需要使用箭头函数 // success callback console.log(response.data) // 响应数据 this.msg = response.data }, (response) => { // error callback console.log(response.statusText) //错误信息 }) } }); </script> </body>
9.5 axios的使用
参考手册：https://github.com/axios/axios/blob/master/README.md
npm安装命令：npm install axios
<body> <div id="app"> <ul> <li v-for="(item,index) in msg" :key="index">{{item.name}},{{item.age}}</li> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/axios/dist/axios.js"></script> <script> new Vue({ el: '#app', data: { msg: [] }, created() { axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/db.json').then(response => { console.log(response.data) // 得到返回结果数据 this.msg = response.data }).catch(error => { console.log(error.message) }) } }); </script> </body>
9.6 组件化axios通信
将上一章的Bootstrap案例，添加axios异步访问
安装npm :npm install axios
引入axios.js
<script src="../node_modules/axios/dist/axios.js"></script>
emp.json
[ {"id": 1, "name": "张三1", "salary": 9899}, {"id": 2, "name": "张三2", "salary": 9999}, {"id": 3, "name": "张三3", "salary": 9099}, {"id": 4, "name": "张三4", "salary": 9199} ]
重构 AppHome.js
; (function () { const template = ` <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <!--右边上半区域--> <!--<h1 class="page-header">Dashboard</h1>--> <!--定义插槽--> <slot name="dashboard"></slot> <dash-board :hobbies='hobbies' @del-Hobby="deleteHobby"></dash-board> <!--右边下半区域--> <h2 class="sub-header">Section title</h2> <home-list :empList='empList' :delItem="delItem"></home-list> </div>`; window.AppHome = { template, components: { DashBoard, HomeList }, data() { return { hobbies: ['看书', '台球', '睡觉', '撸代码'],//dashboard显示数据 empList: [] }; }, created() { axios.get('http://127.0.0.1:5500/vue-07-lifecycle&ajax/04-bootstrap-ajax/emp.json').then(response => { console.log(response.data) // 得到返回结果数据 this.empList = response.data }).catch(error => { console.log(error.message) }) }, methods: { // 删除指定下标的数据 // 因为删除 emp 会对 empList 做更新操作， // 而 empList 是初始化在当前这个组件里，所以删除的函数要定义在这个组件中 delItem(index) { this.empList.splice(index, 1); }, deleteHobby(index) { this.hobbies.splice(index, 1); } } } })()