vue生命周期 脚手架搭建项目

钩子函数:到达某一时间点自动执行的函数
生命周期钩子(11个)beforeCreate created boforeMount mounted beforeUpdate update activated deactivated beforeDestroy  destroy errorCaptured
 
实例 组件
  创建实例
组件挂载(渲染到html页面)
   mount  update
组件运行(在html页面带着并且运行)
   destroy
组件销毁(组件切换)
 
 
 
beforecreate 创建之前 实例化之前 初始化事件 生命周期 数据元素都没有 这个生命周期基本不用
created实例创建完成  数据可以获取 元素依然没有 此时可以ajax请求(渲染一遍 先改数据 渲染) 修改数据不会执行更新方法
beforeMount  挂载之前 有数据没有元素 在挂载之前最后一次对数据操作  修改数据不会执行更新方法 可以ajax请求
mounted   挂在完成 获取数据获取元素 修改页面元素 ajax请求(会渲染两遍 先按初始数据来一遍 再改数据 在渲染)修改数据执行更新方法(这个数据被使用)
beforeUpdate 已经挂载数据更新之前的操作不要在此更新数据 会死循环。
update  已经挂载数据更新完成的操作 不要在此更新数据 会死循环。。
beforeDestroy  移出数据绑定等 但是页面视图依然存在
destroy 移出数据绑定等 但是页面视图依然存在    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
 
vm.nextYick()
 
new Vue({  el:"#app"   })
new Vue({  }).$mount('#app')  这两种的作用是一样滴
 
 
轮播图不动的原因
swiper 初始化需要元素 (3个默认元素)
当ajax请求时 swiper-spide 实在是数据请求后才渲染 导致new swiper实例化的时候 sider元素不存在
解决方案 将new swiper在获取元素挂载后再执行
//mount不行  因为生命周期运行很快  数据还没请求到 挂载就结束了
//放到update 里 
 
虚拟dom
dom是很耗性能的
先放到虚拟dom 再渲染到真实dom
 
生命周期 官图
 

npm install -g vue-cli  //全局安装脚手架工具
vue -V                 //查看当前版本 2.9.6
vue init webpack 项目名  //初始化
cd 项目
npm run dev      //运行工程
npm run bulid  //编译打包  不经常用 用于上线  会多个dist目录这个才是正式上传的
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/mokani/p/10492104.html