Vue知识点（1）

向右看齐 2021-07-25 14:29 536阅读 0赞

# 为什么要用VUE? #

1.1 性能更好  
1.2 视图数据分离  
1.3 维护成本低

# 哪些操作会影响WEB性能？ #

操作DOM影响性能，因为操作DOM是十分昂贵的。

# 为什么操作DOM非常昂贵？ #

1.  Js和DOM是两种东西，每次连接都需要消耗性能
2.  操作DOM会导致重排和重绘
3.  Js和DOM的关系  
    DOM是一个独立于语言的，用于操作XML和HTML文档的程序接口(api).在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。

DOM是个与语言无关的API,它在浏览器中的接口却是用Javascript来实现的。客户端脚本编程大多数都是在和底层文档打交道，DOM就成为现在JS编码中的重要部分。

浏览器中通常会把DOM和javascript独立实现。

# DOM位置和javascript的位置 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

# 浏览器的渲染过程 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

# 什么时候触发重排？ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

# 触发重排的属性： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]

# 什么是重排和重绘？ #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

# 为什么vue的性能更好？ #

![在这里插入图片描述][20200407145702243.png]

# 为什么要用js来模拟dom结构？ #

![在这里插入图片描述][20200407145734461.png]  
![在这里插入图片描述][20200407145750111.png]

# 补充之前jq知识点 #

无论是原生的js还是jquery,绑定点击事件都是通过On的方式进行绑定的。  
元素.on(type,绑定对象(可省略),函数体)

# vue渲染视图时需要注意： #

1.  原始值没有在data或者computed中存在，直接使用的话，会报错，提示undefined；
2.  引用值如果没有存在，直接使用的话，则不会报错，也不会渲染。
3.  数据要先存在，才能够实现数据的绑定
4.  数组中，通过索引的方式去改变数组的话，是不能渲染视图的。还有通过改变数组的长度去改变数据的话，也是不能渲染视图的。
5.  Vue当中的数组的渲染，是通过**数据劫持**的方式来实现的，所以通过索引或者长度的改变是无法渲染视图的。但是可以通过数组的变异函数进行处理。  
    **数据的变异函数有哪些？**  
    `arr.push()` `arr.pop()` `arr.shift()` `arr.unshift()` `arr.sort()` `arr.reverse()` `arr.splice()`  
    Vue中修改数组的值，可以通过数组的变异方法进行处理，如果是对象的话，可以通过`vm.$set()`的方法进行处理，这个函数有三个参数，第一个是处理的是哪个对象，第二个参数是对象的哪个值，第三个参数是处理成什么内容。
6.  Vue挂载的元素可以通过`vm.$el`的方式进行获取
7.  Vue中数据渲染的过程是异步的，为了能够实现页面渲染完成后再获取数据，可以通过  
    `Vm.$nextTick(()=>{})`的方式进行获取。
8.  获取vue的挂载对象有两种方式，一种是`vm.$el` 一种是`vm.$mount` `vm.$mount(‘#app’)`也是可以将vue挂载到\#app元素上的。  
    **注意 e l 和 el和 el和mount的区别是** el只能是通过在vue对象中进行挂载，获取挂载元素的话，可以通过`vm.$el`进行获取。如果没有写el，则可以通过`$mount(‘元素’)`的方式进行处理。

# vue常见的指令 #

1.  `V-pre` 如果一个参数不想要通过vue的形式进行渲染，则可以添加v-pre的指令，则会直接将内容全部展示在页面中，而不是vue的形式
2.  `V-cloak` 可以防止页面中展示出来带花括号的那种形式。使用方法就是在页面的元素上添加 v-cloak 然后添加\[v-cloak\]\{display:none\};
3.  `V-once` 可以让参数在页面一开始加载的时候，渲染，但是如果后续更改则不能展示更改后的值。只渲染一次。
4.  `V-html` 可以将参数以html语句的形式进行展示。使用方法是v-html=”参数名”，需要注意XSS注入攻击。
5.  `V-text` 类似于原生js种的innerText,使用方法是v-text=”参数名”。
6.  `V-if` `v-show` 两者的区别有两个，一个是v-if=“false”时，页面中是没有这些元素的，如果是v-show=”false”，则是改变的css样式，display:none;第二个区别就是，如果是多个html元素的显示与隐藏，则可以通过template元素进行控制，但是v-show是不支持template元素的。
7.  `V-bind` 绑定属性，可以简写成 ： 冒号
8.  `V-model`适用于以下标签 input (text checkbox radio) text textarea select

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020040714550573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200407145527653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200407145554339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200407145613635.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020040714564190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[20200407145702243.png]: https://img-blog.csdnimg.cn/20200407145702243.png
[20200407145734461.png]: https://img-blog.csdnimg.cn/20200407145734461.png
[20200407145750111.png]: https://img-blog.csdnimg.cn/20200407145750111.png