vue生命周期
阅读数:36 评论数:0
跳转到新版页面分类
html/css/js
正文
主要的生命周期函数:
(1) beforeCreate
实例刚在内在中被创建出来, 此时, 还没有初始化好data和methods属性.
(2) created
实例已经在内在中创建ok, 此时data和methods已经创建ok, 但还没有开始编译模板.
(3) beforeMount
此时已经完成了模板的编译, 但是还没有挂载到页面中.
(4) mounted
此时, 已将编译好的模板挂载到了页面指定的容器中显示.
(5) beforeUpdate
状态更新之前执行此函数, 此时data中的状态值是最新的, 但是界面上显示的数据还是旧的, 因为此时还没有开始重新渲染DOM节点.
(6) updated
实例更新完毕之后调用此函数, 此时data中的状态值和界面上显示的数据, 都已经完成了更新, 界面已经被得新渲染好了.
(7) beforeDestory
实例销毁之前调用, 在这一步, 实例仍然完全可用.
(8) destroyed
实例销毁后调用 调用后, Vue实例指示的所有东西都会解绑定, 所有的事件监听器会被移除, 所有的子实例也会被销毁.
vue获取初始化数据是放在created还是mounted?
created在模板渲染成Html前调用，通常初始化某些属性值，然后再渲染成视图。
mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。但是注意mounted不会承诺所有的子组件也都一起被挂载，如果要等待整个视图都渲染完毕，那就需要使用vm.$nextTick
相关推荐
1、安装依赖
npm install svg-sprite-loader --save-dev
2、配置build文件夹中的webpack.base.conf.js
3、在src/component
在列表渲染时使用key属性
当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项的顺序被改变，Vue将不会移动D
一、vue.js devtools开发工具的使用
1、安装
在chrome或firefox浏览器的扩展插件仓库里搜索vue devtool。
2、debugger的使用
假设我们想调试App.vue这
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例。
<!-- `vm.$
在使用Vue中经常看到HTML中有标签属性前面添加了“：”，有些没有。
其实是v-bind的缩写。
v-bind
缩写： ‘：’
用法：动态绑定一个或多个特性，或一个组件prop到表达式。在绑定cl