vue-计算属性与钩子函数

计算属性

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
• 在模板中放入太多的逻辑会让模板过重且难以维护。例如：

  {{ message.split('').reverse().join('') }}

• 在这个地方，模板不再是简单的声明式逻辑。
• 你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。
• 当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

computed

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：
  • 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
• 注意：如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

computed: {
  aDouble: vm => vm.a * 2
}

• 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

• 注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

• 示例：

html:
    <div id="app">
        <h1>{{message}}h1>
        <p>{{message}} 中“小”的个数为 {{wordNum}}p>
        <input type="text" v-model="message">
    div>
js:
	<script>
        /*
        计算属性 需求 ： 计算message里面小的个数
        如果数据发送改变就会重新进行计算

        注意点 ： 
            1.计算属性里面使用到的值必须跟data里面的数据一致
            2.计算属性中的data里面拿到数据发送变化 就会重新计算
            3.在什么时候使用？当数据必须经过计算才能得到 并且必须依赖于data里面的数据 那么就可以使用计算属性
        */
        var app = new Vue({
            el:'#app',
            data:{
                message : "小辣椒"
            },
            computed: {
                // 计算message中小的个数
                wordNum(){
                    //声明一个变量保存个数
                    let num = 0;
                    //遍历 添加
                    for(let i=0;i<this.message.length;i++){
                        if(this.message[i] === "小"){
                            num++;
                        }
                    }
                    //返回
                    return num;
                }
            },
        })
    script>

• 计算属性的set

html:
    <div id="app">
        <h2>{{message}}h2>
        <input type="text" v-model="masic">
    div>
js:
	<script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "吃了吗？？？"
            },
            computed: {
                // 将message里面的脏话变成*
                masic: {
                    get() {
                        return this.message;
                    },
                    set(value){	//value === inputValue
                        // 字符串替换方法replace
                        value = value.replace("干","*");
                        value = value.replace("叉","*");
                        value = value.replace("草","*");
                        value = value.replace("日","*");
                        value = value.replace("滚","*");
                        this.message = value;
                    }

                }
            },
        })
    script>

钩子函数

• 介绍

  • 在js中的钩子函数 相当于回调函数

    • 回调函数 ： 让开发者在特点的时候 执行自定义逻辑
    • 例子：
      • Jquery的动画钩子函数
        $("#onde").animate({},function(){}) //让开发者在动画执行完毕之后，执行自定义逻辑
      • 异步对象的响应完成钩子
        xhr.onlooad = function(){} //让开发者在异步的响应完成之后，执行自定义逻辑
      • window对象的资源加载完毕的钩子函数
      • window.onload = function(){} //让开发者在页面资源加载完成之后，执行自定义逻辑
    • Vue.directives(“指令名”,{})

  • 自定义指令的钩子函数

    • bind:让开发者将自定义指令绑定到元素上时 执行自定义逻辑
    • inserted:让开发者在元素插入dom树上的时候 执行自定义逻辑
    • update:让开发者在元素状态发生改变的时候 执行自定义逻辑
• vue的生命周期钩子
  • 下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
    

html:
	<div id="app">
        <h2>{{message}}h2>
        <input type="text" v-model="message">
    div>
js:
	<script>
        /*
        
        */
        const app = new Vue({
            el:'#app',
            data:{
                message:"在吗?"
            },
            // 生命周期钩子
            // vue的实例化对象刚刚创建完毕 但是数据 以及方法都没有设置到这个vue实例上 所有访问不到
            beforeCreate() {
                console.log("beforeCreate");
                console.log(this.message);
            },
            // vue创建完毕 并且 传入的参数 数据 都已经设置到vue上
            // 页面加载完毕的回调函数，一般用这个
            created(){
                console.log("created");
                console.log(this.message);
            },
            // html还是原来的样子
            beforeMount() {
                console.log("挂载前");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 被vue更改后的html样子
            mounted() {
                console.log("挂载后");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 修改数据时 数据修改前
            beforeUpdate() {
                console.log("数据修改前");
                console.log(this.$el);
                console.log(this.$data);
            },
            // 修改数据时 数据修改后
            updated() {
                console.log("数据修改后");
                console.log(this.$el);
                console.log(this.$data);
            },
            // vue销毁之前
            beforeDestroy: function () {
                console.log('9-beforeDestroy 销毁之前');
            },
            // vue销毁之后
            destroyed: function () {
                console.log('10-destroyed 销毁之后')
            }
        })

    script>