watch监听、生命周期钩子、组件化开发

阿飞的前端日记
153 阅读3分钟

一、watch监听

监听data的 变化，作出事件响应 使用场景

  1. 监听音乐播放时间变化，同步改变进度条

  2. 监听数据变化，进行本地缓存

  3. 浅监听

stu(){  //监听stu的变化  【浅监听】
  console.log('监听到了stu的变化');
  localStorage.setItem('stu',JSON.stringify(this.stu))
}
  1. 深监听
stu:{   //深监听
  handler(){  //处理函数
    console.log('深监听');
    localStorage.setItem('stu',JSON.stringify(this.stu))
  },
  deep:true   //开启深监听
}

二、生命周期钩子函数

在Vue实例创建过程中，会自动触发执行的一些特殊的函数

  1. 生命周期的四个阶段 生命周期函数图
  • 创建阶段
  • 渲染阶段
  • 更新阶段
  • 销毁阶段

  1. created的使用场景

  2. 使用axios发起异步请求

基于Promise对象封装而成的，专门用于发起http异步请求的方法库 文档

  • 回调函数的方式 【可能会导致回调地狱】

    • $.ajax({ url:'', success:(res)=>{

      } })

  • promise写法

    • axios({ url:'' }).then(res=>{

      })

  1. 使用axios请求在线接口
axios({
  url,
  method:'get',
  headers:{ //验证信息，是可选的，后端来决定
    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1610071819201726023958529"}',
    'X-Host': 'mall.film-ticket.film.list'
  }
}).then(res=>{
  console.log(res);
})

三、ES6

ES6标准入门

v-bind:class属性控制语法

参考文档

  • 三目运算
  • 对象
  • 数组 适合同时控制多个class变化
  • 数组+ 三目 适合同时控制多个class变化
  • 数组+ 对象 适合同时控制多个class变化

四、组件化介绍

  1. 什么是组件化？

组件是一个独立封装，带有功能的一个代码板块 组件三要素： + 结构 HTML + 样式 CSS + 功能 JS、JQuery、Vue

  1. 为什么采用组件化？

提高代码的复用性、提升开发效率 项目可维护性较好

  1. 如何实现组件化开发？

先挂载、后使用

  • 封装组件
  • 挂载组件
  • 调用组件

五、vue中组件化

在Vue项目开发时，组件都会被封装成为一个独立的 .vue文件

  1. 全局挂载
Vue.component('my-select',{  //为Vue全局挂载组件
    template:`<div class="my-select">
                此处定义组件结构
              </div>`
  })
  1. 局部挂载
new Vue({
    el:'#app',
    components:{  //局部挂载组件
      'my-select':{
          template:`<div class="my-select">
                  <input type="text">
                </div>`
      },
      'my-alert':{},
      'my-button':{}
    }
  })
  1. 组件的复用性

开放封闭 原则

  • 开放 组件应该提供一些供使用者可自定义调整的接口
  • 封闭 组件内部的通用功能，应该在内部实现后，方便直接调用

六、props组件传参

在组件内部开放一个数据接口，供用户向组件内部传递自定义的数据

  1. 在组件内部定义props
props:['list','holder'],
  1. 在调用组件的时候，传递props
<my-select :list="food" holder="请选择食物"></my-select>
  1. 命名规范
  • 全小写 listdata
  • 全大写 LISTDATA const定义的常量才会使用
  • 小驼峰 listData
  • 大驼峰 ListData
  • 烤串命名法 list-data
  1. props 命名要求
  • 组件外部全小写传递 listdata，内部全小写接收 listdata
  • 组件外部烤串传递 list-data，内部使用小驼峰接收 listData

七、组件内部可以使用那些配置项？

  1. new Vue 实例对象

    • el

    • data 是对象

    • computed

    • watch 可以监听data中的数据变化，作出反应

    • methods

    • created 等生命周期

    • components

  2. Vue.component 组件对象

    • template

    • data 组件内部的data，必须是函数

    • props 接收外部数据包

    • computed

    • watch 可以监听data、props中的数据变化，作出反应

    • methods

    • created 等生命周期

    • components

avatar
文章
阅读
粉丝