三、vue常用特性

vue常用特性

一、computed

计算属性：计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是当多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中，通过关键词computed属性对象中定义一个个函数，并返回一个值，使用计算属性时和data中的数据使用方式一致。

<div id="app">
  <!-- 当多次调用 cfn计算属性时只要里面的 num值不改变,它会把第一次计算的结果直接返回直到data中的num值改变 计算属性才会重新发生计算 -->
  <div>{{ cfn }}</div>
  <div>{{ cfn }}</div>
  <!-- 调用methods中的方法的时候  他每次会重新调用 -->
  <div>{{ fn() }}</div>
  <div>{{ fn() }}</div>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: "#app",
    data: {
      num: 10,
    },
    // 方法
    methods: {
      fn() {
        console.log("methods");
        return this.num;
      },
    },
    // 计算属性(作为属性使用)
    computed: {
      cfn() {
        console.log("computed");
        return this.num;
      },
    },
  });
</script>

注：只要依赖的数据源不发生改变，计算属性里的对应方法就只被调用1次，其它时候被调用时则使用缓存。

二、watch

监听器：使用watch监听data中数据的变化，watch中的属性一定是data中存在的数据

1、声明监听器关键词是watch

2、每个监听器的方法可以接收2个参数，第一个参数是新的值，第二个值是之前的值

<div id="app">
  <p><input type="text" v-model='userinfo.firstName' placeholder="姓" /></p>
  <p><input type="text" v-model='userinfo.lastName' placeholder="名" /></p>
  <p><input type="text" v-model='userinfo.fullName' placeholder="全名" /></p>
</div>

<script src="./js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      userinfo: {
        firstName: '',
        lastName: '',
        fullName: ''
      }
    },
    watch: {
      userinfo: {
        // handler是固定的写法
        handler(val) {
          this.userinfo.fullName = val.firstName + ' ' + val.lastName
          // 对象支持引用传值
          val.fullName = val.firstName + ' ' + val.lastName
        },
        // immediate表示在watch中首次绑定的时候，是否执行handler
        immediate: true,
        deep: true
      }
    }
  })
</script>

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。

三、filters

过滤器：用于一些常见的文本格式化，可以在一个组件的选项中定义，也可以在全局定义，可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<div id="app">
  <div>
    {{message | filterName}}
  </div>
</div>

<script src="./js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '123',
      phone: ''
    },
    // 过滤器
    filters: {
      filterName(num){
        // 对num做一些处理
      }
    }
  })
</script>

四、mixins

混入：mixins 选项接收一个混入对象的数组

　　这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，合并策略：

1、data数据对象发生冲突时以组件数据优先

2、同名钩子函数将合并为一个数组，都将被调用，并且混入对象的钩子将在组件自身钩子之前调用

3、值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// 输出顺序 1 2

局部混入（按需混入）

<script src="./js/vue.js"></script>
<script type="text/javascript">
    // 定义一个混入对象（局部混入）
    var myMixin = {
        created: function () {
            this.hello();
        },
        methods: {
            hello: function () {
                console.log("hello from mixin!");
            },
        },
    };
    // Vue实例
    const vm = new Vue({
        mixins: [myMixin],
    });
</script>

全局混入（强制混入）

<script src="./js/vue.js"></script>
<script type="text/javascript">
    // 全局混入
    Vue.mixin({
        created: function () {
            var myOption = this.myOption;
            if (myOption) {
                console.log(myOption);
            }
        },
    });
    // vue实例
    new Vue({
        data: {
            myOption: "hello!",
        }
    });
</script>