Day35：组件与生命周期

cherise9889
105 阅读6分钟

1.组件的注意点

两个注意点

  1. 所有被vue直接管理的函数，最好写成普通函数，不要写箭头函数。这样它里面的this指向的才是vue或者组件实例对象。
  2. 所有不被vue直接管理的函数（定时器的回调函数，ajax的回调函数，promise回调函数，数组中的回调函数）最好写成箭头函数。这样this指向的才是vue或者组件实例对象。

启动vue

vue create app（文件夹名字，可以随便起）

选择manual

选择npm

启动

export default

是用来导出一个vue组件或者js对象，它通常用于将一个组件定义导出，供其它组件使用

export用来导出模块，vue单文件组件通常需要导出一个对象，这个对象就是vue实例的选项对象

以便于在其他地方可以使用import去引入

scoped属性

是vue组件中的一个特殊属性，它用于限定样式的作用范围

限定当前样式只能作用于当前组件内部的元素，不会影响到其他组件或者是全局样式

VUE中的data为什么必须是一个函数

vue中的data为什么必须是一个函数

1、vue中组件是用来复用的，为了防止data复用，将其定义为函数。

2、vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。

3、当我们将组件中的data写成一个甬数，数据以函数返回值形式定义》这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

4、当我们组件的data单纯的写成对象形式，这些实例用的是同一个构造函数，由于〕avascript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。

2.父子组件传值

  1. 父传子【属性和方法】
    1. 在父组件的子组件标签上绑定一个属性，挂载要传输的变量(在父组件上进行)
    2. 在子组件的export default中通过组件的props接收父控件数据，接收过来的数据可以直接当成属性使用
    3. 如果直接在子类中修改父类提供的属性则会报错，需要在父类中书写方法再传给子类，再从子类中调用即不会报错【父控件】【子控件】
    4. vue不允许子组件中直接修改父组件中的数据，vue遵循单向数据流动的原则，父组件->子组件，数据在哪，修改数据的方法就在哪
  1. 父传子（传递方法的方法2）
    1. 在父组件上定义一个方法，然后在父组件的子组件标签上通过绑定自定义事件，来传递方法。
    2. 在子组件中不需要props来接收（因为不是属性），但是调用时需要通过this.$emit(自定义事件名)来调用
    3. 父控件中改为事件
    4. 子控件中调用
    5. 调用父控件的list内容并打印，判断是否成功调用自定义事件传过来的方法

注意：

props配置选项用来接收父组件传递的数据

vue不允许在子组件中直接修改父组件中的数据

vue是遵循单向数据流动的原则：从父组件向子组件

原则：数据在哪，修改数据的方法就在哪

监听组件的点击

组件上也可以绑定原生的DOM事件，但需要使用native修饰符

没有涉及父子组件传值

在组件上绑定任何事件都被默认为是自定义事件，就把dom原生事件也当做自定义事件

可以通过native告诉系统，我使用的是原生dom事件

3.props配置项

功能

让组件接收外部传过来的数据

传递数据

<组件 ：name='xxx'/>

接收数据

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型，限制必要性，指定默认值）

完整格式

props:{
  name:{
    tpye:String, // 限制类型
      required:false, // 限制必要性
      default:'laowang', // 设置默认值
      }
},

4.组件上的v-model

概念

组件上的v-model是vue的一个指令，用于在父组件和子组件之间进行双向数据绑定

通过使用v-model，父组件可以将数据传递给子组件，子组件也可以修改这个数据，并将修改后的结果传递给父组件。

原理

跟父子组件传值的方式是一样的

在父组件中，通过v-model将数据绑定到了子组件的props属性的value（默认将value当做自定义属性）

同时监听子组件通过this.$emit('input',参数)传递的数据（默认将input当做自定义事件）

v-model相当于一个自定义属性value和一个自定义事件input的结合

5.todolist组件化改写

  1. 点击添加数据到list列表
    1. 在app.vue中创建数组list传给herder
  1. list列表渲染收集到的数据
    1. 在app.vue将数组list传给Itemlist组件，list组件在内部使用props接收，自动实现暂无待办事项和ul列表的切换，同时也会自动渲染ul列表
  1. 删除功能
    1. 数据在父控件，则在父控件定义删除数据的方法
  1. 底部footer实现
    1. 将数组list传给footer组件，且footer组件在内部接收
  1. 底部footer前面复选框实现
    1. 已办事项是个计算属性，其实现与前面一样，
    2. 复选框的设置也是一个计算属性，get方法用于设置footer前面全选框，footer前面全选框就在当前组件当中，所以可以直接修改，这个get方法与之前一样
    3. set方法根据footer中复选框的状态去修改list中item的isDone属性，所以需要将set方法放在父类中，再传给footer去使用
  1. 底部footer右边两个按钮
    1. 在app.vue中创建数组clearDone方法和clear方法，传给footer组件，foot再调用方法
  1. 编辑功能的实现
    1. 在app.vue中提供一个可切换编辑状态的方法，传递到Itemlist组件中调用。
    2. 实现编辑功能,v-model双向数据绑定可以使用在一个文件中，跨文件修改父类内容会报错
  1. 点击span编辑框立即获取焦点
    1. 直接复制自定义指令加入ItemList

6.Vue的生命周期

概念

对象或者实例从出生到死亡的过程

在这个过程中给我们提供了一些钩子函数（在特定情况下自动运行的函数），

在对象和组件到特定的阶段会自动调用。

作用

在生命周期的钩子函数中可以添加自己的代码，实现特定的功能，来帮助我们实现某些效果

初始化阶段

beforeCreate

这个钩子上的data和methods中的数据都是无法使用的。在这个阶段运行的只有实例本身和一些事件和钩子

Created

这个钩子上的data和methods中的数据都是可以使用的，是最早开始使用的data和methods中的数据

挂载阶段

beforeMount

在内存中已经生成了html页面，但是还妹有更新到页面

Mounted

内存和页面已经同步，实例和组件已经加载完成，是最早可以操作Dom元素的钩子函数

运行阶段

当data中的数据被修改的时候调用

beforeUpdate

内存中数据是新的，但是页面中的数据是未更新的

Updated

内存和页面已经同步起来，都是最新的数据

注销阶段

当组件或者实例销毁的时候才会调用

beforeDestroy

data和methods以及一些指令和过滤器都可以用，可以做一些内存的释放操作

Destroyed

彻底销毁了

总结

用的最多的是mounted，在页面加载完成后自动触发，比如发送axios请求

其次是beforeDestroy，将一些没用的东西比如用完的定时器之类的销毁掉。

组件与生命周期.png

avatar
文章
阅读
粉丝