watch和computed v-if和v-show 生命周期函数(这些很是重要)

3.1 computed特性

  1.是计算值，

  2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值

  3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

3.2 watch特性

  1.是观察的动作，

  2.应用：监听props，$emit或本组件的值执行异步操作

  3.无缓存性，页面重新渲染时值不变化也会执行

 

在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】，

 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；

并不会把 计算属性，当作方法去调用；

 

注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；

注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值

注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用；

如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；

data: {
        first: "",
        second: "",
        fullName1: '',
        fullName2: '',

        gbc: '666',

        person: {
          name: "张三"
        }
},
computed: {
      three: function () {
          return this.first + '-' + this.second
          }
      }
watch: {
        first: function (val) {
          console.log(val)
          this.fullName1 =val + this.last
        },
        second: function (val) {
          console.log(val)
          this.fullName2 = val+this.second
        },

        // 只要这个gbc发生变化 就会触发 watch
        gbc() {
          console.log(this.gbc+"ok")
        },

        'person.name':function(news,old){
          console.log(news,old)
        }
 }

1.官网概念描述
  v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

  v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.

  一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在运行时条件不太可能改变,则使用v-if 好点.

2.实践结果
  摘录: 如果用v-if的话，整个dom结构压根就不会出现在页面上，如果是用v-show的话，要视后面的条件来定，如果是true,则显示，如果为false,则加上style=”display:none”. 所以呢，如果是组件之类的大块头，个人觉得用v-if更好一些，如果是一些暂时性隐藏，一会要显示的,还是v-show更方便。对于v-style和v-show来比较，v-show相当于是v-style=”display:none”和v-style=”display:block”的快捷方式。

 

生命周期函数：就是vue在某个时间段会自动执行的函数

1.beforeCreate(){}在执行的时候，data还有methods都没有被初始化

2.created(){} data还有methods都被初始化好了，如果要调用methods方法或者操作data里面的数据，最早只能在created里面进行操作。

3.beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。

4.mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了

   注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。

下面是运行期间的两个生命周期函数的钩子：

5.beforeUpdate(){}  表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据包吃同步。

6.update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。

7.beforeDestory(){}  当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。

8.Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了