1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。
首先来看下官方解释，官方解释说created是在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
这话的意思我觉得重点在于说挂载阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。
看这个例子的结果截图如下，此错误证明找不到id为name的Dom元素。即模板还未渲染成html
所以，一般creadted钩子函数主要是用来初始化数据。
2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
这意思是该钩子函数是在挂载完成以后也就是模板渲染完成以后才会被调用。下面看实例
下面是结果
取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的
总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点
computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。
<body>
<div id="box" :class="{a:true,b:true}">
<div></div>
{{msg}}
<div>
网址 {{msg}}的网络协议是：{{msg2}}
</div>
</div>
<script type="text/javascript">
window.onload=function(){
new Vue({
el:"#box",
data:{
msg:"https://www.baidu.com"
},
computed:{
msg2:function(){
var s=this.msg.split(":")[0];
return s;
}
}
})
}
</script>
</body>mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化
<script>
export default {
name: 'Pos',
data () {
return {
msg: 'a pos website'
}
},
mounted(){
this.getN() //注意是this.getN()，this不能少
},
methods:{
getN(){
alert(1)
}
}
}
</script>
转载于:https://blog.51cto.com/9161018/2322474
