Vue基础篇

内容简介：

1）Vue指令

2）computed和watch

3）生命周期钩子

4）组件间的传参

5）插槽

6）修饰符

7）nextTick()

前端三大框架：

Vue：尤雨溪开发

React：Facebook主导开发

Angular：谷歌主导开发

为什么选择Vue

1国内Vue的市场份额占比多

2简单易上手，非常适合前端开发初学者学习

前置知识：

1HTML、CSS和JS基础

2了解Node和npm

3webpack（可选，vue-cli已经封装了打包功能）

使用Vue的两种方式：

1直接script标签引入vuejs文件

2基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）

前端框架与库的区别

• jquery 库 -> DOM( *** 作DOM) + 动画+ ajax请求

• 框架 -> 全方位功能

一、指令

指令（Directives）是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。

v-model也可用在自定义组件上。

5v-for（列表渲染）

使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1 利用索引直接设置数组的某一项 2 对象属性的添加或删除

二、computed和watch

三、生命周期钩子

什么是Vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。

1）beforeCreate

此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。

2）created

此时可以读取data的值，并可以对其进行 *** 作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行>

1） computed内部的函数在调用时不加()。

2） computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。

3） omputed中的函数必须用return返回。

4） 在computed中不要对data中的属性进行赋值 *** 作。如果对data中的属性进行赋值 *** 作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

5） 当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

使用场景：当一个值受多个属性影响的时候------------购物车商品结算

1） watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

2） watch中的函数有两个参数，前者是newVal，后者是oldVal。

3） watch中的函数是不需要调用的。

4） watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。"objname"(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

5） 特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。thisarrsplice(0,1,100)-----修改arr中第0项开始的1个数据为100，this$set(thisarr,0,100)-----修改arr第0项值为100。

6） immediate:true    页面首次加载的时候做一次监听。

使用场景：当一条数据的更改影响到多条数据的时候---------搜索框

1、 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2、 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3、 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4、 使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。

计算属性通常依赖于其他数据属性。对于依赖属性的任何改变都会触发计算属性的逻辑。计算属性基于它们的依赖关系进行缓存，因此只有当依赖项发生变化时，它们才会重新运行，否则他会使用缓存中的属性值。（例如，返回 new Date()的计算属性将永远不会重新运行，因为逻辑将不会运行超过一次）。计算属性在默认情况下是getters，但是如果需要实现类似的功能，则可以设置setter函数。

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

watch：

watch用来监听当一个数据属性值发生变化时，就可以调用的函数，没有必须依赖的数据属性；属于异步 *** 作；

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

举个栗子

但数据量较大的时候，用watch更合适；在过滤数据的时候用computed。

computed的基础用法：

计算属性的getter函数---当其依赖的属性的值发生变化的时，这个计算属性的值也会自动更新。多用于"data，computed"的属性。

计算属性的setter函数---当赋值给计算属性的时候，将调用setter函数。多用于在模板组件中需要修改计算属性自身的值的时候，例子如下：

计算属性的缓存---Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是我们有时候计算属性依赖实时的非观察数据属性，比如下面例子中的Datanow

计算属性getter不执行的场景---当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性的时候，那么对应的计算属性的getter函数方法不会执行

在v-for中使用计算属性，起到类似"过滤器的作用"，例子如下：

watch与computed的set函数的比较---uex 接收 的computed ，用set监测不到变化，必须要用watch才可以生效；（原理：实质没有改变computd的值，只是改变了get的return值 => 组件外的访问）

v-model 改变的computed，用watch监测不到变化，必须要用computed对象中的set函数方法才能监测得到（原理：相当于每次改变了computed自身的值 => 组件内的访问）

computed和watch都不可用箭头函数，因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，thisa 将是 undefined。

父组件通过props向子组件传入的值，在子组件中是不可修改的，不然会报错，但是如果需要根据页面需求对props传入的值进行修改的话，则可以在data中重新定义一个变量，改变指向，通过watch来监测props值的改变，并实时修改data中变量的值，例子如下：

这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。

那我们想要一开始就让他最初绑定的时候就执行改immediate: true。

handler，Vuejs会去处理这个逻辑，最终编译出来其实就是这个handler。

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改里面任何一个属性都会触发这个监听器里的 handler。

举个栗子：

一、侦听属性watch：

1、不支持缓存，当数据变化时，会直接触发对应的 *** 作。

2、watch支持异步

3、监听函数接收两个参数，第一个新值，第二个旧值。

4、当一个属性发生变化时，需要执行对应的 *** 作，一对多；

5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发对应的 *** 作

函数有两个参数: immediate：组件加载立即触发回调函数执行；

deep：深度监听，为了发现对象内部值的变化，复杂类型的数据使用，例如数组中的对象内容的改变，注意监听数组的变化不需要这么做。

注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异，只有以响应式的方式触发才会被监听到。

6、当需要在数据变化时执行异步或者开销较大的 *** 作时，使用watch是最佳的。

二、计算属性computed:

1、支持缓存，只有依赖数据发生变化时，才会重新进行计算

2、不支持异步，当computed内有异步 *** 作时无效，无法监听数据变化

3、computed属性值默认会走缓存，计算属性是基于他们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。

4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一对一或者多对一，一般用computed。

computed被叫做计算属性：

1在页面中使用大量或是复杂的表达式去处理数据，对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算，这样在页面中就可以简单的写成{{bookmark}}，computed一般是改变data或者props里面的值为己用。

2computed的值不可以在data中定义和赋值

watch被叫做侦听器：

1虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，当需要在数据变化时执行异步或开销较大的 *** 作时，这时watch是非常有用的。

在这个示例中，使用 watch 选项允许我们执行异步 *** 作 (访问一个 API)，限制我们执行该 *** 作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

2watch可以进行深度监听，监听对象的变化。

如果我们要监听group的data1的变化

里面的deep设为了true，这样的话，如果修改了这个group中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如data3，这个时候可以这样：

有不完美之处欢迎大家多提意见~~

以上就是关于Vue基础篇全部的内容，包括:Vue基础篇、深度监听（vue中watch的deep）、10、computed和watch监听的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！