Vue 实例 | 一切都是浮云

# Vue 实例

# vue实例用途

var app = new Vue(options);

vue实例用来创建一个控制模块，我们也可以创建多个实例，实现多个控制模块，但这样内存开销比较大，在开发者，通常一个vue实例就可以了。

<div id="root1">
    {{1+2}}
</div>

<div id="root2">
    {{1+2}}
</div>

<script>
var root1 = new Vue({
    el:'#root1'
})
var root2 = new Vue({
    el:'#root2'
})
</script>

# vue实例的选项参数介绍

var app = new Vue(options);
//options 选项参数

# el参数

用来绑定控制模块的元素选择器，通常用id来绑定，唯一，速度最快。

var app = new Vue({
    el:'#root'
});

# data参数

是vue实例开始运行是的初始化变量

var app = new Vue({
    el:'#root',
    data: {
        msg: '今天天气不错',
        age: 20,
        arr: ['苹果','桔子']
    }
});

注意：不要在data里面做一些表达式计算，比如下面的写法是错误的

var root = new Vue({
    el:'#root',
    data: {
        a: 1,
        b: 2,
        sum: this.a+this.b //错误，应该移到计算属性里面计算
    }
})

# methods参数

事件处理时所调用的方法

<div id="root">

    <button @click="sub()"> - </button>
    <input type="text" size="3" v-model="count">
    <button @click="add()"> + </button>

</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        count: 2
    },
    methods: {
        sub(){
            this.count --;
        },
        add(){
            this.count ++;
        }
    }
})


</script>

# computed参数

computed计算属性是用来计算一些复杂的表达式，避免这些表达式直接写在模板中，导致模板过重，变得难于阅读。

<div id="root">
    {{reverseText}}
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        msg: '今天的天气不错！'
    },
    computed: {
        reverseText: function(){
            return this.msg.split('').reverse().join('');
        }
    }
})
</script>

# computed 和 methods 方法的区别

计算属性调用不需要加括号，而方法调用需要加括号
计算属性不支持传参，而方法可以传参
计算属性会缓存计算结果，而方法不会缓存，每一次调用执行都会重新计算结果，虽然这个结果和上一次是完全一样的。
计算会高度复用，提交效率，节省重复不必要的计算，而方法重复计算，保证状态始终是最新的。

<div id="root">
   <h2>{{reverseText1}}</h2> 
   <h2>{{reverseText2('你好')}}</h2> 

   <h4>当前时间：{{now1}}</h4>
   <h4>当前时间：{{now2()}}</h4>

    <button @click="getNow()">获取当前时间</button>

</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        msg: '今天的天气不错！'
    },
    computed: {
        reverseText1(){
            return this.msg.split('').reverse().join('');
        },
        now1(){
            return new Date();
        }
    },
    methods: {
        reverseText2( msg = this.msg ){
            return msg.split('').reverse().join('');
        },
        now2(){
            return new Date();
        },
        getNow(){
            console.log('计算属性', this.now1 );
            console.log('方法', this.now2() );
        }
    }
})

</script>

# watch参数

用户检测data中某个变量值的变化

<div id="root">
    <input type="text" v-model="fullname">
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        fullname: '张三'
    },
    watch: {
        fullname ( newVal, oldVal ){
            console.log( newVal, oldVal );
            //newVal 新的值，oldVal原来的值
        }
    }
})
</script>

过来输入框数字输入

<div id="root">
    <input type="text" v-model="count">
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        min: 0,
        count: 1,
        max: 10
    },
    watch: {
        count( newVal, oldVal){
            if(newVal<= this.min) this.count = this.min;
            if(newVal>= this.max) this.count =  this.max;
            if(/\D/.test(newVal)) this.count = oldVal;
        }
    }
})
</script>

# vue的生命周期

vue 总共有8个声明周期（钩子）

# beforeCreate 创建之前

该钩子为创建之前，此时没有办法调用data和计算属性中的变量，方法中的函数也无法调用。该构造函数通常用来设置loading，或者用来加载后端接口数据。

var root = new Vue({
    el:'#root',
    data:{
        msg:'你好'
    },
    computed:{
        age(){
            return 22;
        }
    },
    beforeCreate(){
        console.log( this.msg, this.age );//输出 undefined undefined 
    }
})

# created 创建之后

该钩子为创建之后，此时可以调用data和计算属性的变量，方法中的函数也初始化好了，可以调用，可以用来加载后端接口或者设置loading。

var root = new Vue({
    el:'#root',
    data:{
        msg:'你好'
    },
    computed:{
        age(){
            return 22;
        }
    },
    created(){
        console.log( this.msg, this.age );//输出 你好 22 
    }
})

# beforeMount 挂载之前

该钩子为挂载之前，此时data、计算属性、方法中的各项数据均已初始化完毕，可以取值和调用，但是并没有把数据同步到模板中（比如覆盖{{}}大胡子占位符）。

<div id="root">
    <div v-html="btn"></div>
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        btn: '<button id="btn">按钮</button>'
    },
    beforeMount() {
        console.log('挂载之前', document.getElementById('btn') );
        //输出null 上方获取不到按钮原生对象，因为代码还没有插入到页面当中去。
    },
})
</script>

# mounted 挂载之后

该钩子为挂载之后，此时已经做好了各项的计算，已经把数据和dom同步了或者说绑定了。此时操作dom，最安全。

<div id="root">
    <div v-html="btn"></div>
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        btn: '<button id="btn">按钮</button>'
    },
    mounted() {
        console.log('挂载之后', document.getElementById('btn') );
        //输出 按钮原生对象
    },
})
</script>

# beforeUpdate 更新之前

注意该钩子函数，必须数据是有变化才会触发，所有一刷新的时候，它并没有触发，因为没有变化。

var root = new Vue({
    el:'#root',
    data: {
        btn: '<button id="btn">按钮</button>'
    },
    beforeUpdate() {
        console.log('更新之前');
    }
})
</script>

# updated 更新之后

注意该钩子函数，必须数据是有变化才会触发，所有一刷新的时候，它并没有触发，因为没有变化。

var root = new Vue({
    el:'#root',
    data: {
        btn: '<button id="btn">按钮2</button>'
    },
    updated() {
        console.log('更新之后');
    }
})

# beforeDestroy 销毁之前

此钩子为销毁之前，通常创建一个vue实例，那么这个实例会常驻内存，监控data中的变量变化，一旦发生变化，则会同步数据到模板中，这种响应数据，并且将数据同步到dom中，这种思想我们通常叫做MVVM思想。

M：model 数据模型，简单理解它是 data里面的变量 V：view 视图，简单理解它是模板 VM：虚拟DOM，绑定数据和dom，让你不再管理dom，你只需要负责维护数据即可。

销毁，就是让上面的监听失效。

<div id="root">
    <h2>{{msg}}</h2>
    <button v-on:click="xiaohui()">销毁监听</button>
</div>

<script>
var root = new Vue({
    el:'#root',
    data: {
        msg:'张三'
    },
    beforeDestroy() {
        console.log('销毁之前');
    },
    destroyed() {
        console.log('销毁之后');
    },
    methods: {
        xiaohui(){
            root.$destroy();
        }
    }
})
</script>

# destroyed 销毁之后

实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

← 组件基础模板语法 →