Android java class 做推广 Java开发手册 idea 常用快捷键 HTTP请求 海思 syntax redis常用语句 jvm vue组件开发 系统后台模板 外卖系统源码 jquery遍历对象 java三维数组 java数据分析 mysql统计数量 mysql卸载重装 flutter 缺点 Navicat kubernetes视频教程 mysql 连接 python字典类型 python基本语法 python数字类型 javafile java正则 java重写和重载的区别 java抽象方法 java系统时间 java读取文件 java注释规范 java查看变量类型 java电子书下载 pushstate 51脚本 苹果手机老是自动重启 php抓取网页数据 max电池容量 淘宝自动发货软件
当前位置: 首页 > 学习教程  > 编程语言

生命周期钩子

2020/9/19 14:57:45 文章标签:

生命周期钩子

  • 在这里插入图片描述

  • beforeCreate

    • 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    • 应用场景:可以用来初始化变量,这个变量不具有响应式,可以读取this,挂载静态变量
  • created

    • 在实例创建完成后被立即调用
    • 在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。
    • 应用场景:可以做响应式数据的修改,同步修改,读取this,读取data里面的数据,做数据的初始化
  • beforeMount

    • 在挂载开始之前被调用:相关的 render 函数首次被调用。
    • 该钩子在服务器端渲染期间不被调用。
    • 应用场景:最后一次响应数据的修改,会把上次的给覆盖掉,再做一次数据初始化
  • mounted

    • 实例被挂载后调用
    • DOM已经渲染在页面上了,可以操作DOM。以及AJAX请求
    • 相当于生存期,可以修改生存期的状态,就是修改data里的数据,可以激活beforeupdate和updated。
    • 该钩子在服务器端渲染期间不被调用。
  • beforeUpdate

    • 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器
    • 该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
  • updated

    • 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子

    • 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作

    • updated 不会保证所有的子组件也都一起被重绘,希望等到整个视图都重绘完毕,可以在 updated 里使用

    • 该钩子在服务器端渲染期间不被调用

  • actived

    • 被 keep-alive 缓存的组件激活时调用。
    • 该钩子在服务器端渲染期间不被调用
  • deactivated

    • 被 keep-alive 缓存的组件停用时调用。
    • 该钩子在服务器端渲染期间不被调用
  • beforeDestory

    • 实例销毁之前调用。在这一步,实例仍然完全可用
    • 该钩子在服务器端渲染期间不被调用
  • destoryed

    • 实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
    • 该钩子在服务器端渲染期间不被调用

note

  • SPA: Single Page Aplication 单页面应用
  • 一个Vue实例可以管理一棵DOM树(不常用),通常用组件管理DOM片段
  • 响应式现象 reactive
  • compile 编译 injection 注入
  • 钩子就是函数 hooks
  • 不要在选项 property 或回调上使用箭头函数,比如 created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefinedUncaught TypeError: this.myMethod is not a function 之类的错误。
  • beforeCreate created 创建 初始化的钩子
  • beforeMount mounted 挂载 创建时的钩子
  • beforeupdate updated 更新 生存期的钩子
  • beforeDestory destoryed 销毁 销毁器的钩子
  • 生命周期钩子在满足条件的情况下自动执行
  • handler 句柄 回调
  • component属于vue的内置组件,不需要定义,天生就有,有个重要组件is,在is后可以冠以组件名字,会动态的装载组件,在装载后面的组件的时候前面的组件会被卸载,会激活beforeDestory和destoryed。也可以手动的调用this.$destory方法
  • fetch() 相当于promise
  • ajax请求写在created会有延迟,因为还没有渲染完 ,放在mounted最好

表单输入绑定

  • serialze() jQuery中收集所有表单信息方法

  • 接口组成因素 :

    • url;
    • request (首部字段,报文,请求报文,响应报文);
    • response;
    • methods:请求方法(get,post,put,patch,hearder,delete,);
    • 数据类型: 规定数据格式
  • post是insert逻辑(添加,修改) put 把原来的覆盖,patch打补丁

  • input 输入框 textarea多行输入框 select选择框 用来采集数据,收集用户信息

  • 数据双向绑定:

  • v-model =“textValue”

  • MVVM Model -View -ViewModel VM相当于控制中心

  • MVP Presenter

  • 单个复选框 true false

  • 多个复选框 数组

  • 单选按钮 radio 只有一个状态 提取多个单选按钮的某个值, 给单选按钮加一个value,通过v-model定义一个固定的值,当我们选中了某个input时,value就赋值给input

  • 多选 checkbox

  • 选择框 select 要把v-model放在select上 不是 option ,如果在option没有写value,它就会默认提取option的text,text可以使用multiple这个bool属性进行多行截取

修饰符

  • number ~~
  • lazy onchange
  • trim 去空格

组件库

  • vant

  • 在组件里定义data,必须使用闭包,返回一个data

  • 动态组件 dynamic component

  • 全局组件

  • 输入两个参数(组件名字,组件本身定义)

  • data必须是一个函数,对象会放在环境里运行,

  • 闭包:可以访问另一个作用域下的变量,本身是一个函数,(执行上下文,变量对象this,作用域量)

  • 主要作用是组件复用,是拆分的意义

  • 组件间通信:父子组件

    • 父传子

      • 在父组件上给引用组件元素上加一个属性,在子组件上通过props使用属性
      • slot 在父组件内部包一个子元素,在slot内置元素中读取
    • 子传父

      • 在父组件绑定一个事件,在子组件通过$emit触发这个事件,一般有两个参数(定义的事件名字,传递的信息)

父组件上给引用组件元素上加一个属性,在子组件上通过props使用属性
- slot 在父组件内部包一个子元素,在slot内置元素中读取

  • 子传父

    • 在父组件绑定一个事件,在子组件通过$emit触发这个事件,一般有两个参数(定义的事件名字,传递的信息)

本文链接: http://www.dtmao.cc/news_show_200209.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?