Vue学习——计算属性与监视属性

一、计算属性

什么是计算属性

  1. 定义:要用的属性不存在,需要用已存在的属性计算得来。
  2. 原理:底层借助了Object.defineProperty提供的getter和setter。
  3. get函数什么时候执行
    (1) 初次读取计算属性时
    (2)计算属性所依赖的数据发生变化时
  4. 计算属性内部有缓存机制,效率更高。
  5. 备注:
    (1)计算属性放在vm身上,直接读取使用即可
    (2)如果要对计算属性进行修改,需要配置set函数,并且要在set中引起依赖数据的变化。

姓名案例:

<body>
  <div id="root"><input type="text" v-model="firstname"><br><br><input type="text" v-model="lastname"><br><br>
    全名<span> {
  {fullName}} span>
  div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
     
      el: '#root',
      data: {
     
        firstname: '张',
        lastname: '三'
      },
      // 计算属性写在computed中,最终会被放在vm身上,可直接使用
      computed: {
     
        fullName:{
     
          // get返回的值就是fullName的值
          // get被调用的时机:1.初次读取fullName  2.fullName所依赖的数据发生变化,即firstname和lastname
          get(){
     
            console.log(this); //计算属性中get的this指向当前vm
            return this.firstname + '-' + this.lastname
          },
          // set用来修改fullName的值,注意:要在set中修改firstname和lastname的值,才能使fullName发生变化
          set(value){
     
            const valueArr = value.split('-')
            this.firstname = valueArr[0]
            this.lastname = valueArr[1]
          

你可能感兴趣的:(Vue学习笔记,vue.js,vue.js,javascript)