Vue知识点整理2

本地应用

内容绑定，事件绑定

v-text

v-text：指令的作用是设置标签的内容(textContent)默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容，内部支持写表达式。

v-htm

v-html：指令的作用是设置元素的innerHTML，内容中有html结构会被解析为标签。

v-on基础

v-on：指令的作用是为元素绑定事件，事件名不需要写on，指令可以简写为@，绑定的方法定义在methods属性中，方法内部通过this关键字可以访问定义在data中的数据。

显示切换，属性绑定

v-show

v-show：指令的作用是根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏，数据改变之后，对应元素的显示状态会同步更新。

v-if

v-if：指令的作用是根据表达式的真假切换元素的显示状态，本质是通过操作dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除，频繁的切换v-show，反之使用v-if,前者的切换消耗小

v-bind

v-bind：指令的作用是为元素绑定属性，完整写法是v-bind:属性名，简写的话可以直接省略v-bind，只保留:属性名，需要动态的增删class建议使用对象的方式

列表循环，表单元素绑定

v-for

v-for：指令的作用是根据数据生成列表结构，数组经常和v-for结合使用，语法是(item,index)in数据，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参，事件的后面跟上.修饰符可以对事件进行限制，.enter可以限制触发的按键为回车，事件修饰符有多种

v-model

v-model：指令的作用时便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据<——>表单元素的值

生命周期

生命周期: 一个vue对象从创建到销毁的整个过程
生命周期函数: 也叫生命周期钩子, 是在生命周期过程中主动调用的一些函数

钩子函数

vue的钩子函数有`四个过程`, 对应`八个函数`

创建过程 beforeCreate 创建前和 created 创建后
渲染过程 beforeMount 渲染前和 mounted 渲染后
更新过程 beforeUpdate 更新前和 updated 更新后
销毁过程 beforeDestroy 销毁前和 destroyed 销毁后

深度监听

常见的三种数据更新,视图不更新的特殊情况

data中的数组通过索引更新数据,但数组长度不变
没有在data中定义的数据更新
data中的对象, 初始化后添加的字段更新

深度监听: 主要针对以上第三种监听不到的情况, 用于监听对象的更新

常用的两种解决方案

强制刷新,适用于所有情况 this.$forceUpdate()
$set更新, 使用数组更新 this.$set(arr, index, value)

指令修饰符

指令修饰符: 在指令后打点调用的属性字段,用于给指令添加特有功能

.number 用于双向绑定,使表单中的数据自动转化为数字类型
.trim 用于双向绑定, 取出表单输入字符前后空格
.prevent 用于事件绑定,阻止事件默认行为
.stop 用于事件绑定, 阻止事件冒泡
.once 用于事件绑定, 限制事件只能触发一次
.shift 用于键盘事件, 指定那些键会触发事件
.prop 用于属性绑定, 可以把标签的attribute属性改成property属性
.capture 用于事件, 默认事件在冒泡过程执行, 它可以使事件在挖洞过程执行
.self 用于事件, 只能由元素自身触发事件,不能由子元素冒泡触发
.left .right .middle 仅当点击特定的鼠标按钮时会处理执行函数
.lazy 用于双向绑定输入时不更新数据, 输入完成时更新相当于change事件

vue中的指令修饰符有哪些?

常用: trim lazy number stop prevent enter
不常用: prop capture self left right middle once

组件

什么是组件?

当一个页面数据视图异常庞大,里边的数据逻辑非常多, 造成页面复杂臃肿, 不易于阅读,调试,更新, 此时, 我们可以把一个页面拆分开, 把页面中一个个独立的功能模块单独分开,独立实现此模块的模板,样式和逻辑, 分割成的每一个模块叫做 组件, 这就是组件化编程 也是 vue框架的一个好处

组件化有什么好处?

使项目结构清晰, 更容易阅读和维护更新, 每一个组件之间作用域相互隔离, 互不干涉, 类似于前端模块化

如果创建一个组件?

根组件: 使用new Vue()创建的vue对象就是vue根组件, 全局唯一
全局组件: 使用Vue.component()创建的对象就是全局组件,在所有组件模板中可用
局部组件: 在组件的components字段中定义的组件是局部组件,之能在其定义的组件模板中使用

组件如何使用?

组件可以认为是自定义标签, 直接当作标签来用即可, 叫做组件标签

组件需要注意的细节?

组件模板使用template属性绑定模板字符串或独立模板
vue内置组件template模板要求有且仅有一个根元素
组件数据data是一个函数,不是对象
html标签不支持大写, 如果组件名用驼峰定义, 那么组件标签名应用小写 - 分割

为什么组件中的data是一个函数而不是对象?

组件一般不是唯一的,是需要复用的,如果组件中data是个对象, 在复用, 引用的是对象的内存地址,相当于浅拷贝, 结果一个组件数据变化时,另一个组件会受到影响, 所以data是一个函数, 返回一个新的对象, 这样每次调用组件, 都会得到一个新的对象,属于深拷贝, 使各个组件数据相互独立,不影响

传值

插槽

在组件标签的开始标签和结束标签中写的数据叫插槽数据, 插槽数据默认不会展示到子组件模板中, 可以使用vue内置组件slot, 在子组件模板中展示插槽数据，插槽数据不只是字符串也可以是一段html代码
在子组件标签中要插入data动态数据, 数据来源于父组件, 会展示到子组件中, 这种方式叫做: 组件传值

组件传值

组件传值: 把一个组件中的数据传入另一个组件中展示使使用插槽slot把父组件数据传入子组件展示, 叫做插槽传值
slot 标签就是插槽, 用于展示组件标签中的数据, 每一个slot标签都会展示一遍数据

props

父组件向子组件传值:

在子组件对象的props字段中定义属性：props: ["childCount"]
在子组件标签上绑定自定义属性并赋值：<mycom :child-count="father"></mycom>
在子组件对象或模板中调用自定义属性, 调用方式和data数据相同：<div>子组件: {{child}}</div>

slot插槽传值和 props属性传值的异同点?

相同点: 都是用于父组件向子组件传值
不同点: 插槽数据仅用于模板展示,不能在组件对象中调用和修改, 而props属性传值可以在组件中调用,过滤,监听,计算等操作

emit

子组件向父组件传值:

定义一个自定义事件, 使用this.$emit() 发射事件把数据传出去： this.$emit("myevent", this.childCount)
在子组件标签上绑定自定义事件, 调用事件函数：<mycom @myevent="getData"></mycom>
在父组件中的事件回调中, 获取数据并赋值：getData(data){this.father = data}

bus总线

兄弟组件传值：

在全局作用域创建一个空的vue对象, 称之为bus总线：var bus = new Vue()
在发送数据的组件中, 使用bus总线发起自定义事件, 发送数据：bus.$emit("event", this.count)
在接收数据的组件中，使用bus绑定事件接收数据：bus.$on("event", data=>{this.count2 = data}）

自定义指令

全局自定义指令：`Vue.directive("binge", function(el,obj,c){}`  参数1：`指令所在的元素`，参数2：`指令名对象`  参数3：`指令配置对象`
定义局部vue指令: 只能在当前vue模板中使用

directives:{
    color(a,b,c){
        console.log(a,b,c)
        a.style.color = b.value;
    }
}

异步更新

由于vue数据的更新是同步的, 更新后数据this.name立即改为最新值
但是视图的更新是异步的, 数据更新后, 视图并没有立即更新, 所以打印视图结果还是更新前的结果
如果想在视图更新结束后,打印视图的显示, 可以在异步更新回调中执行
this.$nextTick(()=>{})异步更新队列, 参数是视图更新完成的回调函数

监视器

watch监视器的监视原理?

当vue初始化时,会使用Object.defineProperty()对data数据进行重定义和数据拦截, 在set函数中,判断此属性是否在watch监视器中被监视, 如果是,调用new Watcher创建watcher对象并和此属性进行绑定, 把回调函数传入watch监视器的函数参数中, 当监视的属性发生变化时, 会去执行set函数, 在set函数中调用watcher对象的回调, 也就是watch监视器中的监视函数 (使用原理还是回调原理) 类似于发布订阅模式

重用机制

重用机制: 也叫惰性机制, 指vue模板中的结构在销毁重建过程中,如果销毁和重建的标签结构相同, 则不再执行销毁和重建过程, 而是把要销毁的标签修改属性后直接拿来用
好处: 可以减少DOM创建销毁, 节省内存, 提高渲染效率
弊端: 表单中输入的数据内容没有重置, 可能暴漏隐私信息, 或造成更新渲染异常

那如何解决重用机制弊端, 如何避免重用机制发生?

解决方案1: 使创建销毁前后的标签结构不同, 即可避免重用机制
解决方案2: 给创建销毁前后的标签设置属性key以不同的值, 可以避免重用机制
key属性是给vue模板中元素的唯一标识,可以使vue视图时更加准确的识别每一个DOM元素,提高渲染的效率, 在v-for循环中建议给每一个循环的元素添加不同的属性key值, 以避免重用机制造成的渲染异常

计算属性

计算属性是如何缓存数据的?

计算属性每次计算完结果, 会把计算结果赋值给一个全局变量, 当数据更新时, vue会判断计算属性依赖的数据源有没有更新,用一个变量dirty(脏值)记录源数据状态, 如果计算属性依赖的源数据没有变化, 会脏值记录为false, 如果有变化, 脏值被记录为true, 之后开始更新视图, 在数据更新到计算属性处, 执行脏值判断, 如果脏值为true,则重新执行计算属性计算过程, 如果脏值为false, 则直接返回全局变量记录的计算结果

Vue基础

Vue简介

JsvaScript框架
简化Dom操作
响应式数据驱动
官方网址：https://cn.vuejs.org

第一个Vue程序

步骤:

导入开发版本Vue.js
创建Vue实例对象，设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

开发环境版本，包含了有帮助的命令行警告


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： -->
  <div id="app">   { { message } }   </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {message: 'Hello Vue!'}
    });
  </script>

el：挂载点

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他选择器，但是建议使用ID选择器
可以使用其他的双标签，不能使用HTML和BODY

data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂数据类型的数据
渲染复杂类型数据时，遵守js的语法即可