重走vue之初识vue及vue的生命周期

vue

vue是一个MVVM视图层框架,可以构建出复杂的单页面应用程序。vue与原生的Js显著的区别就是不再 对dom进行直接操作,而是通过对数据操作来改变视图。也就是说数据模型中的数据发生改变时,视图中使用到该数据的地方也会随之改变

安装

  1. 通过cdn在html中引入

在cdn加速服务器中获取vue的库直接进行导入即可,这种方式更加便捷,另外当项目部署到服务器以 后直接从cdn上获取资源要比直接从我们的云服务器上获取资源的速度快很多

  1. 通过npm进行安装

模块化安装,这种方式一般需要在node环境下进行开发,然后编译打包后才能应用到浏览器中
npm install vue

  1. 通过vue-cli脚手架安装

Vue脚手架,可用于快速搭建大型单页面应用,用于企业级开发。

现在我们通过cdn引入的方式,来创建我们的第一个vue网页,
实例:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-hellotitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        //创建vue实例   vue实例要与模板绑定(dom)绑定
        window.onload = function () {
            let vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue'
                },
                //函数
                methods: {
                    changeMeassage() {
                        //更改数据模型中的数据
                        //获取数据模型中的数据
                        // 在vue实例内访问vue实例身上的属性和方法 ,这时候this指向的就是vm这个对象
                        this.message = '我变了'
                    }
                }
            })
        }
    script>
head>
<body>
    <div id="app">
        
        
        {{message}}
        <p>{{message}}p>
        
        <button @click="changeMeassage">点击我改变msgbutton>
    div>
body>
html>

vue的生命周期

从vue实例创建到虚拟dom产生再到数据绑定数据监听数据渲染以及销毁的整个过程就称之为vue的生命周期

vue的生命周期主要分为四个阶段

  1. vue实例初始化阶段

生命周期的第一步首先是创建vue实例,并且进行初始化

  1. 挂载阶段

生命周期的第二步是挂载并渲染

  1. 更新阶段

截止到现在,vue已经将页面显示了出来。随着用户的操作会引起数据改变进而导致页面刷新

  1. 销毁阶段

对vue实例的销毁操作

下面是详细的vue生命周期:

  1. beforeCreate 创建实例之前

在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的 初始化。这个时候还不能直接访问data中的属性及method中的方法

  1. created 实例创建好了,可以访问数据模型中的数据

在初始化完毕以后,完成了vue的数据注入及数据监听操作,该钩子的执行意味着vue实例创建 完毕,可以进行数据的访问操作

  1. beforeMount 挂载之前

在created之后,vue会判断实例中是否含有el属性,如果没有会调用vm.$mount(el) ,接着会判 断是否含有template属性,如果有将其解析为一个render function ,如果没有将el指定的 外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中

  1. mounted 挂载之后

创建vm.$el替换el,实际上这里完成的是数据绑定操作,在期间执行了render函数,将模板进 行了解析,将数据进行了动态绑定

  1. beforeUpdate 更新之前

更新虚拟dom节点

  1. updated 更新好了

完成了页面的重新渲染

  1. beforeDestroy vue实例销毁之前

销毁之前调用,此时还是可以访问vue实例的

  1. destroyed vue实例实例销毁完毕

完成了监听器,子组件,事件监听等移除,销毁vue实例对象

实例:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期title>
    <script src="../js/vue.js">script>
head>

<body>
    <div id="app">{{msg}}
        <button @click='test'>事件测试button>
    div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                test() {
                    console.log('点击事件处理程序');
                }
            },
            beforeCreate() {
                console.log('创建实例之前')
            },
            created() {
                console.log('实例创建好了,可以访问数据模型中的数据');

            },
            beforeMount() {
                console.log('挂载之前');

            },
            mounted() {
                console.log('挂载之后');
                //一般在这边操作dom
            },
            beforeUpdate() {
                console.log('更新之前')
            },
            updated() {
                console.log('更新好了')
            },
            beforeDestroy() {
                console.log('销毁之前')
                console.log(this.msg)
            },
            destroyed() {
                console.log('实例销毁完毕')
                console.log(this.msg)

            }
        })
        setTimeout(() => {
            //vm.msg = '我变了'
            vm.$destroy();
        }, 3000)

    script>
body>

html>

你可能感兴趣的:(vue,vue.js,javascript)