vue系列--【生命周期、侦听器watch、计算属性、jsonp解决跨域】
1.生命周期
let vm=new Vue({
// 创建之前:什么都是undefined
beforeCreate() {
console.group("创建之前");
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.groupEnd();
},
// 创建完成：vue对象创建完成，但是挂载点还没找
created() {
console.group("创建完成");
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.groupEnd();
},
// 如果有el，就会触发挂载期；如果没有，挂载期就不执行
// 挂载之前：找到了要挂载的标签（el）,但是指令、{{}}还没有解析
beforeMount() {
console.group("挂载之前");
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.groupEnd();
},
// 挂载完成：指令、{{}}解析完成,DOM节点加载完成
// 操作DOM、打开计时器、一进到页面做数据交互、给document、window加事件
mounted() {
console.group("挂载完成");
console.log('el:', this.$el);
console.log('data:', this.$data);
console.log('name:', this.name);
console.groupEnd();
/*
document.onclick = function () {
}
window.onscroll = () => {
if(到底了){
ajax
}
}*/
},
//数据变了，页面重新更新之前和更新之后取到的都是新值
//页面重新更新之前
beforeUpdate() {
console.group("更新之前");
console.log('name:', this.name);
console.groupEnd();
},
//页面重新更新完成
updated() {
console.group("更新完成");
console.log('name:', this.name);
console.groupEnd();
},
// vm.$destroy() 触发，会引起销毁--
//销毁之前-善后工作 ：清除计时器、清除document、window上的事件。
beforeDestroy () {
console.group("销毁之前");
console.groupEnd();
//window.onscroll=null;
},
destroyed () {
console.group("销毁完成");
console.groupEnd();
}
})
template
<div id="app">
</div>
<script>
// 如果Vue没有template选项，那么就解析的是el对应的节点
// 如果Vue有tempalte选项，那么解析的就是template，把template替换el
new Vue({
el:"#app",
template:"<h3>这是template--{{name}}</h3>",
data:{
name:"妲己"
},
methods:{}
})
</script>
方法
vm.$mount("#app")//挂载
vm.$destroy()//销毁
2.侦听器 监听器 watch
作用：
监听data|computed数据的改变
语法：
new Vue({
watch:{
//只有浅监听才可以简写
name(newValue, oldValue) {
console.log("name变了");
console.log(newValue, oldValue);
},
age: {
handler() {
console.log("age变了");
},
//深度 false 浅监听,true 深度监听 默认值：false
deep:false
},
//如果数据是简单类型（string、number、boolean）,浅监听就ok
// 一旦监听对象是个引用类型，需要使用深度监听（加一个deep:true）。
json:{
handler(newValue,oldValue){
console.log("json变了");
},
deep:true
},
}
})
注意
开发，不建议使用深度监听，因为深度监听会造成页面卡顿。
3.计算属性
定义：
经过计算得到的数据。
语法：
new Vue({
computed:{
msg(){
return 10
},
ava(){
let sum=0
this.student.forEach(item=>{
sum+=item.score;
})
return (sum/this.student.length).toFixed(2)//保留两位小数
}
}
})
4.计算属性和methods的区别？
两种方式得到的结果是相同的。
不同的是
计算属性是基于变量的值进行缓存的，只要在它关联的变量值发生变化时计算属性就会重新执行。
而methods 没有缓存，所以每次访问都要重新执行。
计算属性是自动触发，methods是手动触发。
5.计算属性和watch的区别？
共同点:都是以Vue的依赖追踪机制为基础的，都是希望在依 赖数据发生改变的时候，被依赖的数据根据预先定义好的函 数，发生“自动”的变化。
不同点:
watch擅长处理的场景:一个数据影响多个数据;
computed擅长处理的场景:一个数据受多个数据影响。
虽然 计算属性在大多数情况下更合适，但有时也需要一个自定义 的侦听器，当需要在数据变化时执行异步或开销较大的操作 时，通过侦听器最有用。
总结: 当在模板内使用了复杂逻辑的表达式时，应当使用计算属性。 虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖进行缓存，所以选择计算属性会比方法更优。 当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。
6.vue中常见的bug有哪些？
{{}} 会出现闪屏 ---》v-text
数组|json变了 不渲染 ---》Vue.set() vm.$set()
watch深度监听会卡顿 ----》少用、methods
if+for ---------------》computed
7.jsonp解决跨域
使用步骤
1.创建一个script let os=document.createElement("script")
2.给src赋值访问路径 os.src="url"
3.插入到页面 document.body.appendChild(os)
4.回调函数处理数据
使用jsonp的条件
1.跨域
2.有一个参数叫 callback|cb
