Vue基础知识-基础使用

Posted 2021-09-08 火腿肠烧烤大赛冠军

computed与和watch

computed与watch的区别
computed：

• computed的缓存是指 data不变就不会重新计算
• computed一个v-model的值需要get和set
  watch：
• 监听引用类型要深度监听（deep：true）
• 拿不到oldVal问题（指针都是指向一个地址，所以拿不到。oldVal和val一样）

class和style

动态使用class：

style注意是驼峰写法：

条件渲染

• v-show为display：none
• v-if只有一个节点

循环列表的渲染

遍历数组以及对象：

v-for与v-if同用问题：
v-for优先级更高，循环后再判断 做了很多次重复的判断
**解决方案：**要在外层写v-if或者里面也可以

事件

**event传送方式：**只传event以及传event和自定义参数

vue的事件放在什么元素下就挂载到什么下

事件修饰符

按键修饰符

表单

组件使用

props和$emit

**父传子：**两种写法

子传父：
通过emit来调用父组件的方法：

自定义事件-兄弟之间通讯方式

实现方法函数：

绑定自定义事件：

兄弟组件调用方法：

调用自定义事件方法：

event来源：

**注意及时销毁：**否则造成内存泄漏

生命周期（单个组件）

mounted与created的区别

mounted页面已经渲染完毕
createdvue已经初始化完毕

beforeDestory要做什么事情

解除绑定
销毁子组件以及事件监听器

带有父子组件的生命周期

初始化实例：（created）
父组件先创建子组件后创建
渲染完成：（mounted）
子组件先完成父组件后完成
更新：（beforeupdate、updated）
父组件先开始更新，子组件后开始更新
子组件先更新完成，父组件后更新完成
销毁：（destoryed、beforedestoryed）
父组件先开始销毁，子组件后开始销毁
子组件先销毁完成，父组件后销毁完成