vue 知识点未完待续...

vue的知识点整理

tips:来自网络，持续更新

1.vue渐进式框架的理解

主张最少
可以在原有项目中使用，当作一个js库来使用
可以作为开发全家桶，在需要的时候引入router,vuex等

2.vue的两个核心

数据驱动 和 组件

3.vue的生命周期和钩子函数

看这个文章，很好

4.v-if和v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show
有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。

5.Vue 组件中 data 为什么必须是函数

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次。
组件中的data数据都应该是相互隔离，互不影响的。
基于这一理念，组件每复用一次，data数据就应该被复制一次，
之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

详情请看这里

6.vue更新数组时触发视图更新的方法

vm.$set | Vue.set();

7.vue watch computed methods

computed && methods 
computed:{
    func:function(){
        dosomething;
    }
}
methods:{
    func:function(){
        dosomething;
    }
}
函数定义为一个方法或者计算属性。
两种方式的最终结果确实是完全相同的。
然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。
只在相关响应式依赖发生改变时它们才会重新求值。
这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch：Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
watch: {
    // 如果 `msg` 发生改变，这个函数就会运行
    msg: function () {
        dosomething;
    }
  },

8.vue父子组件通信？

//父组件
<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>
<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },
  // 引入子组件
  components:{
      children: Children
  }
}
</script>

//子组件
<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>
  </div>
</template>
<script>
  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

更多通信方式请移步这里

9.vue 双向绑定原理

一句话：利用vue Object.definePrototype(obj,prop,descriptor) 加上 发布-订阅设计模式，监听值变化后更新值。

老规矩，看这里-->双向绑定原理实现

10.vue自定义组件，指令，过滤器

//组件  https://cn.vuejs.org/v2/guide/components-registration.html
Vue.component('my-component-name', { /* ... */ })

//指令 https://cn.vuejs.org/v2/guide/custom-directive.html
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//局部注册
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
钩子函数 请看官网
//过滤器 https://cn.vuejs.org/v2/guide/filters.html

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

未完待续...