vue学习记录(三)---混入，扩展及小知识点

1、mixin 混入的使用

<body>
<div id="container">
    <div>{{count}}</div>
    <input type="button" value="btn" @click="change">
</div>

<script src="./vue.js"></script>
<script>
//混入的执行顺序分别是全局的混入=》内部的混入=》本身的实体钩子
Vue.mixin({
    updated() {
        console.log('这个是全局的钩子');
    }
});
let app = new Vue({
    el: '#container',
    data: {
        count: 0
    },
    updated() {
        console.log('这个是本身的钩子');
    },
    mixins: [{
        updated() {
            console.log('这个是内部的钩子');
        }
    }],
    methods: {
        change() {
            this.count ++;
        }
    }
});
</script>
</body>

2、vue内部的extends的用法

<body>
<div id="container">
    <div>{{count}}</div>
    <input type="button" value="btn" @click="change">
    <input type="button" value="btn1" @click="add">
</div>

<script src="./vue.js"></script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        count: 0
    },
    methods: {
        change() {
            this.count ++;
        }
    },
    mixins: [
        {
            methods: {
                add() {
                    console.log('这个是混入的add方法');     //注意： 如果混入的的methods里的函数名与本体的函数名一样，那么将不会被执行
                }
            }
        }
    ],
    extends: {
        methods: {
            add() {
                console.log('this is add methods');
            }
        }
    }
})
</script>
</body>

注意：如果混入与extends里的methods里的函数名与本体的函数名一样，那么将不会被执行

3、改变vue的插值表达式

<body>
<div id="container">
    <div>${count}</div>
    <input type="button" value="btn" @click="change">
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        count: 0
    },
    methods: {
        change() {
            this.count ++;
        }
    },
    delimiters: ['${','}']
})
</script>
</body>

3、$forceUpdate 强制更新VUE

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

<body>
<div id="container">
    <div>{{msg}}</div>
    <input type="button" value="btn" @click="fresh">
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        msg: 'this is msg'
    },
    methods: {
        fresh() {
            this.$forceUpdate();
        }
    },
    created() {
        console.log('created');
    },
    mounted() {
        console.log('mounted');
    },
    updated() {
        console.log('updated');
    }
})

</script>
</body>

4、$nextTick的使用

<body>
<div id="container">
    <div>{{msg}}</div>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
    el: '#container',
    data: {
        msg: 'this is msg'
    }
});
//当定义了该方法后，当DOM元素渲染完成后里面的函数就会被调用，该方法主要用于一些需要获取节点的操作
app.$nextTick(function() {
    console.log(arguments, this);
});
app.$data.msg = 'today is good day';
</script>
</body>

　　在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

　　　　 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

5、$emit, $on的内部使用

如果是一个vue实例，那么其内部之间的平级组件实现通信是可以通过内部定义的观察者实现的，例如

<body>
<div id="container">
    <bill></bill>
    <bill></bill>
</div>
<template id="bill">
    <div>
        <h2>{{title}}</h2>
        <input type="button" value="btn" @click="change">
    </div>
</template>
<script src="./vue.js"></script>
<script>
let bill = {
    template: '#bill',
    data: function() {
        return {
            title: 'this is title'
        }
    },
    methods: {
        change() {
            this.$data.title = 'are you ok????';
            this.$root.$emit('innerEvent', 'this is check', this);
        }
    },
    mounted() {
        this.$root.$on('innerEvent', function() {
            console.log(arguments);
        })
    }
};

let app = new Vue({
    el: '#container',
    components: {
        bill
    }
})
</script>
</body>

6、在IE9或IE10下，浏览器报错 requestAnimationFrame”未定义的解决方案 => 在main.js下添加如下代码

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
          window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }
}());

7、render函数的使用

在官方实例上，render函数的方法如下

a、当第一个参数是一个视图的时候

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

b、但其实，render函数的用途和参数不只这些，当第一个参数是字符串的时候

new Vue({
  router,
  store,
  render: h => {
      return h('div', {                     // 创建一个DIV元素
          attrs: {                          // 在div元素上绑定些属性
              id: 'abc',
              'data-val': 123
          },
          style: {                          // 绑定style样式
              color: 'red'
          },
          'class': ['a', 'b'],              // 绑定class类
          on: {                             // 绑定事件
              'click': () => {
                  console.log('okok');
              }
          }
      }, [
        h('span', 'this is first span'), // 第二个参数可以是配置，也可以是子节点（必需是数组）, 也可以是一个字符串（即innerHTML）
        h('span', 'this is second span')
      ]);
  }
}).$mount('#app')

注意第二个参数可以不传，可以直接传第三个参数

c、当第一个参数是一个组件的时候

new Vue({
  router,
  store,
  render: h => {
      return h(CountTo, {
          attrs: {},
          'class': [],
          style: {},
          props: {
              endVal: 1000
          },
          on: {
              'endCount': val => {
                  console.log(val);
              }
          },
          nativeOn: {
              'click': () => {          // 点击事件
                  console.log('ok');
               }
          },
          directives: [],
          scopedSlots: {},
          slot: '',
          key: '',
          ref: ''
      })
  }
}).$mount('#app')