Vue基础语法（四）

vue的生命周期钩子函数

所有的生命周期钩子自动绑定this到上下文实例中，因此可以访问数据对property和方法进行运算，这意味着不蹦使用箭头函数来定义一个生命周期方法。参考官方文档，生命周期图

生命周期钩子一共有十一个，这里只写八个

 

<template>
  <div></div>
</template>
<script>
export default {
  //生命周期函数就是vue实例再某一时间点会自动执行的函数
  data() {
    return {}
  },
  components: {},
  methods: {},
  beforeCreate() {
    console.log('beforecreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    //被执行时页面还没有被渲染
    console.log(this.$el)
    console.log('beforeMount')
  },
  mounted() {
    //被执行的时候页面已经被渲染完毕了
    console.log(this.$el)
    console.log('mounted')
  },
  beforeDestroy() {
    //当组件被销毁时才会触发
    console.log('beforeDestory')
  },
  destroyed() {
    //当组件被完全销毁时会触发
    console.log('detory')
  },
  beforeUpdate() {
    //当数据发生改变还没被重新渲染之前执行
    console.log('beforeUpdate')
  },
  updated() {
    //当数据发生改变被重新渲染之后执行
    console.log('updated')
  }
}
</script>

 vue的三种模板语法

这三个里面都可以加表达式而不仅仅是变量 比如name+‘lee’

<template>
  <div>
    <!-- 插值表达式跟v-text的作用一模一样，
        v-text会对name进行转义将h1直接以字符串渲染输出，
        v-html会让name输出改变样式 -->
    <div>{{ name }}</div>
    <div v-text="name"></div>
    <div v-html="name"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '<h1>vivin</h1>'
    }
  },
  methods: {}
}
</script>

 vue的计算属性、方法和侦听器

<template>
  <div>
    {{ fullname }}
    {{ age }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstname: 'chary',
      lastname: 'swite',
      fullname: 'chary swite',
      age: '21'
    }
  },
  // 第一种方法
  //   computed: {
  //     //计算属性  它是内置缓存的 如果所依赖的相关变量没有反生改变，只有age变化，那么fullname是不会重新计算一次的，就是所谓的缓存机制
  //     fullname() {
  //       console.log('计算了一次')
  //       return this.firstname + ' ' + this.lastname
  //     }
  //   },
  // 第二种方法
  //   methods: {
  //     fullname() { //没有缓存机制，性能不如计算属
  //       console.log("计算了一次")
  //       return this.firstname + ' ' + this.lastname
  //     }
  //   }
  // 第三种方法
  watch: {
    //它和computed都具有缓存机制，但是比computed复杂，所以还是computed优先使用
    firstname() {
      console.log('计算了一次')
      this.fullname = this.firstname + ' ' + this.lastname
    },
    lastname() {
      console.log('计算了一次')
      this.fullname = this.firstname + ' ' + this.lastname
    }
  }
}
</script>
<style scoped></style>

computed中的get和set方法的使用

<template>
  <!-- 计算属性的setter和gettter -->
  <div>{{ fullname }}</div>
</template>
<script>
export default {
  data() {
    return {
      firstname: 'chary',
      lastname: 'swite'
    }
  },
  computed: {
    fullname: {
      get: function() {
        return this.firstname + ' ' + this.lastname
      },
      set: function(value) {
        let arr = value.split(' ')
        this.firstname = arr[0]
        this.lastname = arr[1]
        console.log(value)
      }
    }
  }
}
</script>

条件渲染

不推荐v-if和v-for同时使用，因为v-for具有比v-if更高的优先级  参考风格指南

<template>
  <!-- v-if和v-show的区别，最开始show赋值为false时，
       v-if没有被渲染在页面，从dom节点上移除了，它有更高的切换开销
       而v-show已经被渲染在了页面上只不过它的display为none ，它有更高的初始开销
       所以v-show性能相对高一点-->
  <div>
    <input type="button" @click="show = !show" />
    <div v-if="show">{{ message }}</div>

    <div v-else>二哈</div>

　　<div v-show="show">{{ message }}</div>

  </div>

</template>
<script>
export default {
  data() {
    return {
      message: 'vivin',
      show: false
    }
  },
  methods: {}
}
</script>