vue-学习知识点总结（一）

知识点1：

element里面的trigger: 'blur'和trigger: 'change'有什么区别？
答：触发方式：blur失去焦点，change数据改变

知识点2：

ref属性是什么？
答：ref用于在vue中操作dom元素
ref='test'
this.$refs.test.dom操作
或
this.$refs['test'].dom操作

知识点3：

solt是什么？

答：元素槽，组件下嵌套元素

知识点4：

数据绑定变量+字符串？

答：绑定数据可以这么写`` 字符串拼接变量
:ref="`inputEditName` + row.id"

知识点5：

Vue中的el，称之为挂载点。

原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。

var app = new Vue({
  // el:"#app", //对应的 id选择器
  // el:".app", //对应的 class选择器
  // el:"div", //对应的 html类型
  el:"#body",
  data:{
    message:"hell！"
  }
})

知识点6：

mounted是什么？

答：mounted是vue中的一个钩子函数。

在vue生命周期中created后，beforeMount后，beforeUpdate之前执行。

挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

知识点7：

谷歌浏览器console不见了？
答：此时只需要按下键盘的esc键就可以啦

知识点8：

修改prop数据

妥帖的方案是，使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值

props:['childMsg'],
data(){
  return{
    temp:this.childMsg
  }
},
watch:{
  childMsg(){
    this.temp = this.childMsg
  }
}

知识点9：

el-dialog嵌套子组件时，子组件回传数据到父组件，需要使用 @xxx="xxx"，xxx为子组件$emit传的事件名称

<el-dialog :visible.sync="dialogUpload" style="text-align: center">
<upload-qiniu :image-url="dialogUploadImageUrl" :show-img="showImg" @uploadComplete="uploadComplete" />

知识点10：

watch用法，handler方法，immediate属性，deep属性
当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行handler方法，此时就需要将immediate设为true。
immediate:true代表如果在 wacth 里声明了 viewDetials之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

watch里面还有一个属性deep，默认值是false，代表是否深度监听当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

watch: {
  showImg: {
    deep: true,
    immediate: true,
    handler(val) {
      console.log(val)
    }
  }
}

知识点11：

什么是Vue.nextTick()？
答：$nextTick

  mounted() {
    this.$nextTick(() => {
      const self = this
      let pageHeight = 0
      self.tableHeight = window.innerHeight - self.$refs.tableList.$el.offsetTop - 64 - 200 - pageHeight
      // 监听窗口大小变化
      window.onresize = function() {
        if (self.total > self.listQuery.limit) {
          pageHeight = 56
        }
        self.tableHeight = window.innerHeight - self.$refs.tableList.$el.offsetTop - 64 - 200 - pageHeight
      }
    })
  },

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；
理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

什么时候需要用的Vue.nextTick()？
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，

所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；

通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

3、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

Vue.nextTick(callback) 使用原理：
原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。

如果这个watcher被触发多次，只会被推送到队列一次。

这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。

而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。