「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

创建vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的.我们先创建一个html文档，在body中加入<script>元素，vue实例在js中创建。我们通常会给Vue 实例设置一个范围（ el ），也就是我们在这个实例中的信息只在该范围内有效，这里取名、使用id或者class都可以

<div id='app'>
</div>
 
var vm = new Vue({
   el: '#app'
})

在此之前我们需要引用vue的js文件

<script src="./static/vue-2.4.0.js"></script>

data 就是定义数据的地方，我们显示在页面的元素大部分都是从这里取的， methods是写方法的地方，用户通过触发方法改变页面。

这里页面显示 data中 msg 的信息，按钮+1 触发add方法，对msg进行+1操作改变页面中msg显示的数字

    <div id='app'>
        {{msg}}
        <button @click="add"> +1 </button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 0
            },
            methods: {
                add(){
                    this.msg++ ;
                }
            }
        })
    </script>

生命周期

vue生命周期.png beforeCreate 第一个生命周期函数，实例完全被创建出来之前会执行它，这时data 和 methods中的数据都还没有进行初始化

created 第二个生命周期函数，在实例创建完成后被立即调用，此时 data 和 methods中的数据可以被调用处理，此时已完成计算属性computed 和 watch监听

计算属性

此时{{ sum }}调用的不是data中的元素，而是计算属性中的方法

    <div id="app">
        {{ sum }}
        {{ msg }}
    </div>
    <script>
         let vm = new Vue({
            el:"#app",
            data:{
                m1: 2000,
                m2: 3000,
            },
            // 计算属性computed
            computed: {
                sum(){
                    return this.m1 + this.m2
                },
                msg(){
                    return "123456" + 'hhhh'
                }
            },
        })
    </script>

监听器

使用watch查看每次触发add（）方法后m1值的前后变化

<button @click='add()'> 每次给m1加100 </button>

watch: {
    m1: (newValue, oldValue) => {
    console.log(newValue, oldValue);
    }
},
methods: {
    add(){
        this.m1 += 100;
    }
}

beforeMount 第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中。此时页面中的元素还没有真的被替换过来，之前写的一些模板字符串如 {{ msg }} 还是没有被替换

mounted 第四个生命周期函数，内存中模板渲染到页面中了 {{ msg }} 还是被替换成 msg的值 '123'。 mounted 也是实例创建期间最后一个生命周期函数，mounted执行完就表示实例已经完全被创建好了

组件运行阶段的生命周期函数只有2个： beforeUpdate （数据更新时调用）和 updated（组件更新完毕），都可能会触发0次或多次

beforeDestroy 第七个生命周期函数，vue实例销毁前，还没有真正执行销毁的过程

destroyed 第八个生命周期函数，vue实例已经销毁了，实例身上所有的data和methods以及过滤器、指令都不可用

vue生命周期函数以及computed和watch

创建vue实例

生命周期

计算属性

监听器