zoukankan      html  css  js  c++  java
  • vue中的生命周期

    实例生命周期

    每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化阶段、运行中阶段、销毁阶段

    每个Vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到DOM、数据变化时更新等。同时这个过程中也会运行一些叫做生命周期钩子的函数,给与用户机会在一些特定的场景下添加自己的代码

    
        $.mount():若vue实例在实例化中没有el选项,则处于未挂载状态,可用$.mount手动地挂载一个未挂载的实例。
        
        $.destory():完全销毁一个实例。清理它与其他实例的连接,解绑它的全部指令及事件监听器。
        ---
    
    生命周期的过程阶段(钩子函数):
    1. beforeCreate:实例、组件通过new Vue()创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,此时,数据还没有挂载,只是一个空壳,无法访问到数据和真实的dom,一般不做操作。
    2. created:挂载数据、绑定时间等等,然后执行created函数,此时可以用到数据,也可以更改数据,更改数据时不会触发updated函数,这是在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
    3. beforeMount:然后开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在该函数中虚拟dom已经创建完成,马上就要渲染。此时也可以更改数据,不会触发updated,这是渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取
    4. mounted:接下来开始render,渲染出真实dom,然后执行mounted钩子函数,此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已挂载,此时可以操作真实dom等等...
    5. beforeUpdate:当组件或实例的数据更改后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做其他操作
    6. updated:当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
    7. beforeDestory:当经过某种途径调用$destory方法后,立即执行beforeDestory,一般做这些操作,比如:清除计时器、清除非指令绑定的事件等等
    8. destoryed:组件的数据绑定。监听...销毁后只剩下空壳,此时执行destoryed,也可以做一些例如清除计时器、清除非指令绑定的事件等操作。
    vue-cli脚手架
    
    由官方提供的,基于webpack的脚手架工具:vue-cli
    
    

    安装方法:

    
    全局安装vue-cli:npm install --global vue-cli
    
    创建一个基于webpack模板的新项目:vue init type(webpack) my-project(注:type是定义模板的类型)
    
    安装依赖:cd my-priject
    
             npm install
             
             npm start(npm run dev)
             
    

    模板类型:

    simple:对应一个很简单的html文件

    webpack:在配置的时候可以选择是否需要vue-router

    注意的是,模板创建的时候会询问使用需要使用ESLINT来标准化我们的代码

    脚手架中:src文件夹是开发目录,build文件夹负责打包文件,config文件夹是负责配置(内置服务器的端口、proxy代理)

    
    static文件夹是静态目录,test文件夹是测试
        
    src文件夹的main.js是入口文件,在里面创建了一个根实例,根实例的模板是组件App的模板,其他的组件都在根组件中进行嵌套实现。
    
    

    每一个组件都是一个单文件组件,这种文件会被webpack利用vue-loader的工具进行编译

    
    template部分负责写组件的模板内容,script中创建组件。style里写组件的样式
    
    assets目录也是静态目录,在这个目标中的文件我们使用相对路径引入,而static目录中的文件使用绝对地址来引入
    
    在style上添加scoped能使这个style里的样式只作用于当前的组件,不加scoped就是全局样式
    
    习惯于在App.vue根组件的style里写全局样式,而每个组件的style最好都是局部的
    

    原文地址:https://segmentfault.com/a/1190000012523310

  • 相关阅读:
    linux驱动开发学习一:创建一个字符设备
    如何高效的对有序数组去重
    找到缺失的第一个正整数
    .NET不可变集合已经正式发布
    中国人唯一不认可的成功——就是家庭的和睦,人生的平淡【转】
    自己动手搭建 MongoDB 环境,并建立一个 .NET HelloWorld 程序测试
    ASP.NET MVC 中如何用自定义 Handler 来处理来自 AJAX 请求的 HttpRequestValidationException 错误
    自己动手搭建 Redis 环境,并建立一个 .NET HelloWorld 程序测试
    ServiceStack 介绍
    一步一步实战扩展 ASP.NET Route,实现小写 URL、个性化 URL
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9961788.html
Copyright © 2011-2022 走看看