1. Left Cycle Function

• beforeCreate( ) ： 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
  此时还没有进行数据代理，数据监测，所有vm身上并没有_data的属性。

• created( ) : 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。vm身上也存在_data属性。

• beforeMount( ) : 在挂载开始之前被调用，这时页面中的插值语法都未被解析。该钩子在服务器端渲染期间不被调用。

• mounted( ) : 实例被挂载后调用，页面中的插值语法已经被解析了。该钩子在服务器端渲染期间不被调用。

• beforeUpdate( ) : 在数据发生改变后，DOM 被更新之前被调用。  该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。

• Updated( ) : 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

• destroyed( ) : 实例销毁后调用。  该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

2. Computed計算屬性

1.常規用法

data: {  
    firstName: 'Foo',  
    lastName: 'Bar'  
},  
computed: {  
    fullName: function () {  
        return this.firstName + ' ' + this.lastName  
    }  
}

2.默認是getter,需要時也可以提供setter

// ... 
computed: {   
    fullName: {     
        // getter     
        get: function () {     
            return this.firstName + ' ' + this.lastName    
        },    
        // setter     
        set: function (newValue) {      
            var names = newValue.split(' ')       
            this.firstName = names[0]       
            this.lastName = names[names.length - 1]     
        }   
    }
}

3. Watch監聽

觀測Vue實例上的數據變動，對應一個對象

監聽watch的三種寫法：Key就是要檢測的那個東西

• 當鍵值發生變化時，兩個參數(變化前和變化後)

      data:{
          return{
              arr:[1,2,3]
          } 
      },
      watch:{
          arr(newV,oldV){
              console.log(newV); 
              console.log(oldV);    
          }
      }
  

• 也可以是函數，單引號包裹

  watch: {
      data： 'change' // 值可以为methods的方法名
  },
  methods: {
      change(newValue,oldVal){
         console.log(oldVal,newVal)
      }
  }
  

• 還可以是對象,如下含有三個參數handler,deep,immediate

   {
       handler ：一个回调函数，监听到变化时应该执行的函数。  
       deep ：boolean值，是否深度监听。（一般监听时是不能监听到对象属性值的变化的，数组的变化可以听到）
       immediate ：boolean值，是否立即执行handler函数。
   }
  

      data:{
          user : {
              username: "111",
              password: "222"
          }  
      },
      watch:{
          user:{
              handler(newV,oldV){
                  console.log(oldV);
              },
              deep:true
          }
      }
  

4. Data中的return

<button type="primary" @click="clickA">{{a}}</button>
<button type="primary" @click="clickB">{{b}}</button>

    data() {
        this.a = false
        const arr = []
        return {
          b: false,

        }
    },
    watch: {
      a(newVal) {
        console.log(newVal)
      },
      b(newVal) {
        console.log(newVal)
      }
    },
    methods: {
        clickA() {
          this.a = !this.a
          console.log(this.a)
        },
        clickB() {
          this.b = !this.b
          console.log(this.b)
        },
    }

• a定义在了return之外,就不是响应式的了，所以第一个button中间显示的a一直都是最开始的初始值false,但是点击的时候是在改变a的值，clickA方法中打出来的a是true/false/true/false,并且使用watch监听不到a的变化

• b定义在了return內,是响应式，第二个button中间显示的b就是true/false/true/false,并且使用watch能监听到b的变化

5. Filters

• 如果是定义到 filters 节点下，本质是一个函数
• 过滤器函数中，一定要有 return 值
• 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
• 如果全局过滤器和私有过滤器名字一致，此时按照"就近原则"

私有

<template>
    <div class="homes">
        <div class="oldData">{{age}}</div>
        <div :id='age | addAge'>{{age|changeAge}}</div>
    </div>
</template>
 
<script>
export default{
    data() {
        return{
            age:23
        }
    },
    filters:{
        changeAge(age){
                return '我今年' + age + '岁啦！' 
        },
        addAge(age){
                return age+1
        }
    }
}
</script>

全局

//过滤器可以与 {{ }} 绑定一起使用，也可以在v-bind 中使用。如下代码可以将一个字符串略缩为一个定长字符串：
<p>{i description | truncate }}</p>
 
//在Vue.js中通过调用 Vue.filter() 可以全局注册一个过滤器，可以在其它的 Vue 实例中使用。
//这个方法有两个参数，第一个参数是过滤器的名称，第二个参数是一个函数，这个函数被用来处理需要过滤的值。
//truncate 是过滤器的名称，它接收一个字符串并将其截断为指定的长度.
Vue.filter( 'truncate', function (text,length,suffix){
    if (text.length > length){
        return text.substring(0，length) + suffix;}
    else {
        return text;
    }
});

6. Demo

<template>
  <div>
    <Card dis-hover>
      <ApplySteps :currentStep="1" :key="d1Stage?.d0" :stage="d1Stage" :eqpID="uuid" :mroID="mroUuid"></ApplySteps>
    </Card>
    <ContentLayout
      :title="$t('EQUIPMENT_MODEL_DESIGN')"
      ref="tabRef"
      :tab.sync="tab"
      :tabs="tabs"
      :handleTabClick="tabFocus"
    >
      <template #tab-buttons>
        <div
          class="flex-container justify-content-end pr-3 py-4"
          style="background-color: white; border-radius: 0 0 6px 6px"
        >
          <Button class="ml-2" type="error" :disabled="btnPermission.cancelDisabled" @click="handleShowCancelModal">
            {{ $t("BUTTON_CANCEL_APPLICATION") }}
          </Button>
          <Button class="ml-2" @click="backClick">{{ $t("BUTTON_BACK") }}</Button>
          <Button
            class="ml-2"
            type="info"
            :disabled="btnPermission.approvalDisabled"
            @click="() => (showApprovalHistory = true)"
          >
            {{ $t("BUTTON_APPROVAL_HISTORY") }}
          </Button>
        </div>
      </template>
    </ContentLayout>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import SpecialSpec from "@/components/EqmModDesign/SpecialSpec.vue"
import ContentLayout from "@/components/Layout/ContentLayout"

export default {
  name: "EqmModDesign",
  //import 導入，這裡註冊，template就可以使用了
  components: {
    ContentLayout,
    SpecialSpec
  },
  data() {
    return {
      uuid: null,
      tab: 0,
    }
  },
  methods: {
    ...mapGetters(["getLanguage"]),
    ...mapActions(["toggleLoading"]),
    init() {
      this.uuid = this.$route.params.id
      //mro uuid用來給步驟條點回追蹤or出廠檢驗
      this.mroUuid = this.$route.query.mroID
      if (this.uuid) {
        let vueInstance = this
        vueInstance.toggleLoading(true)
        getD1Form(vueInstance, this.uuid)
          .then((response) => {
            vueInstance.d1FormEqpModel = response.data
            vueInstance.mappingD0FormData(response.data)
          })
          .finally(() => {
            this.toggleLoading(false)
          })
      }
    },
    backClick() {
      this.$router.push({ name: this.$global.PARAMS.defaultRouterName })
    },
    handleShowCancelModal() {
      this.showCancelModal = true
    },
    cancelClick(desc) {
     。。。。
    },
  },
  computed: {
    language() {
      return this.getLanguage()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>