vue知识整理

1、Vue 表单修饰符(lazy,number,trim)

修饰符 作用
.lazy lazy 修饰符修改 input 触发为 change 触发
.number number 修饰符可以将返回结果自动转化为 Number 类型,否则就是 String 类型
.trim trim 过滤首尾空格符

1、 lazy:使用了这个修饰符将会从“input 事件”变成 change 事件进行同步

<div id="example">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</div>

new Vue({
   el:"#example",
   data:{
     message:""
   }
})

如在 input 上输入 '123456' 这时光标还没有失去焦点 p 标签是不会显示内容的
要在 input 标签失去焦点后 p 标签上才会显示出 123456 的内容

2、number

首先明白这个 number 并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型

举个例子,如果用户输入 300,data 中绑定的其实是'300'(string),添加 number 指令后可以得到 300(number)的绑定结果。

而如果用户输入的不是数字,这个指令并不会产生任何效果。

v-model.number="message"

3、 trim

trim 可以用来过滤前后的空格

v-model.trim="message"

它会限制用户的输入 不会让用户在开始和结束输入空格符

2、vue 指令中的 v-once

v-once 在日常开发中用的很多,

只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

常见用法如下:

当修改 input 框的值时,使用了 v-once 指令的 p 元素不会随之改变,而第二个 p 元素时可以随之改变的


<div id="app">
        <p v-once>{{msg}}</p>  //msg不会改变
        <p>{{msg}}</p>
        <p>
            <input type="text" v-model = "msg" name="">
        </p>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el : '#app',
            data : {
                msg : "hello"
            }
        });
    </script>

一开始两个 p 标签显示的都是 hello 内容 如果在 input 中输入其他内容 那么第一个 p 标签的内容并不会受到影响 只有第二个标签会发生改变

3、Object.defineProperty()的理解

对象是由名/值对组成的无序的集合。

定义对象可以使用构造函数或字面量的形式:

var obj = new Object();
obj.name = 'sss';

我们还可以使用 Object.defineProperty 定义新属性或修改原有的属性。

语法:

Object.defineProperty(obj, prop, descriptor)

参数说明:

obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性

给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。

数据描述

当修改或定义对象的某个属性的时候,给这个属性添加一些特性:

var obj = {test:'sss'}
Object.defineProperty(obj,'test',{
    value:任意类型的值, //不设置该属性 ,默认为undefined
    configurable: true | false, // 是否可以delete删除目标属性或者是否可以再次修改属性的特性
    enumerable: true | false,   //是否可以被枚举(for..in |Object.keys())
    writable: true | false   //是否可以被重写
})
存取器描述
var obj = {};
var initValue = 'hello';
Object.defineProperty(obj, 'newKey', {
  get:
    function() {
      return initValue;
    } | undefined, //不设置get方法,则默认undefined
  set:
    function(value) {
      initValue = value;
    } | undefined,
  configurable: true | false,
  enumerable: true | false
});

ps:当使用了 getter 或 setter 方法,不允许使用 writable 和 value 这两个属性

4、vue 在哪些情况下会执行生命周期中的销毁这个钩子?

组件被销毁时

<demo v-if="hasDemo"></demo>

那么将 hasDemo 由 true 改为 false 时,会触发 Demo 组件的销毁钩子。

注意 v-show 指令不销毁元素而只是隐藏,故不会触发这个钩子。

5、在组件中怎么访问到根实例?

  • 通过 this.$root

6、<template></template>有什么用?

  • 当做一个不可见的包裹元素,减少不必要的 DOM 元素,整个结构会更加清晰

7、函数式组件

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

<script>
export default {
  props: ['value']
}
</script>

函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法,非常轻量,因而渲染性能高,特别适合用来只依赖外部数据传递而变化的组件。

函数式组件比普通组件性能更好,缺点是定义的数据没有响应式。

8、vue 中组件 name 的作用

我们在写 vue 项目的时候会遇到给组件命名

这里的 name 非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的

1.当项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤

举个例子:

我们有个组件命名为 detail,其中 dom 加载完毕后我们在钩子函数 mounted 中进行数据加载

export default {
    name:'Detail'
},
mounted(){
   this.getInfo();
},
methods:{
   getInfo(){
          axios.get('/xx/detail.json',{
              params:{
                id:this.$route.params.id
              }
          }).then(this.getInfoSucc)
     }
 }

因为我们在 App.vue 中使用了 keep-alive 导致我们第二次进入的时候页面不会重新请求,即触发 mounted 函数。

有两个解决方案,一个增加 activated()函数,每次进入新页面的时候再获取一次数据。

还有个方案就是在 keep-alive 中增加一个过滤,如下图所示:

<div id="app">
  <keep-alive exclude="Detail">
    <router-view />
  </keep-alive>
</div>

exclude 就是排除 name 为 Detail 的组件不进行缓存 那这样就会每次进页面都会进行数据请求了

9、vue diff 算法详解

详解 vue 的 diff 算法

10、$attrs$listeners 属性使用教程

Vue v2.4 中新增的$attrs$listeners 属性使用教程

vue 组件的 inheritAttrs 属性

11、vue中scoped的原理

作用功能:

实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模

块虽然方便但是我们需要慎用,因为当我们使用公共组件时会造成很多困难,

增加难度,想知道造成那些难度,需要先从scoped实现原理了解

实现原理:

通过观察DOM结构可以发现:vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用,如图,样式属性上也会多一个该字符,以保证唯一

Snipaste_2019-12-03_16-11-27.png

可以看出加上scoped后的组件里的标签都会多一个data-v-469af010的属性,并且在css样式部分可以看出

Snipaste_2019-12-03_16-11-39.png

由此可知,添加scoped属性的组件,为了达到不污染全局,做了如下处理:

  • 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性

  • 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局

  • 如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件( 注意 )

慎用原因:

其实从原理已经能够了解到慎用原因,这里权当总结

从原理可见,之所以scoped可达到类似组件私有化、样式设置“作用域”的效果,其实只是在设置scoped属性的组件上的所有标签添加一的data开头的属性,且在标签选择器的结尾加上和属性同样的字段,起到唯一性的作用,但是这样如果组件中也引用其他组建就会出现类似下面的问题:

1.父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的样式的(原因在原理中可知),虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件

2.父组件有scoped属性,子组件无,父组件也无法设置子组件样式,因为父组件的所有标签都会带有data-v-469af010唯一标志,但子组件不会带有这个唯一标志属性,与1同理,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件

3.父子组建都有,同理也无法设置样式,更改起来增加代码量

推荐阅读更多精彩内容

  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 2,758评论 0 24
  • 1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实...
    王童孟阅读 459评论 0 2
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 1,328评论 0 6
  • Vue.js是什么 Vue.js是一个渐进式javascript框架,渐进式就是由浅入深、由简单到复杂的方式去使用...
    A郑家庆阅读 488评论 0 2
  • Vue知识点的总结 Vue中的指令及其基本语法: 第一步:从官网上下载vue开发版本的js文件 引入js文件 ...
    往前走莫回头_2cd6阅读 1,052评论 0 1
  • 愿, 从原从心, 愿力便是追随自己的本心。 世间人在茫茫的奔波中, 往往忘失了本心, 所以要智者(mentor)的...
    李春元Lucy阅读 25评论 0 1
  • 苏沐寄第一次见到叶安然时,便被她的眼睛吸引,他从来不知道,一个人的眼睛可以如此的流光溢彩,像是局满了宇宙的光,明晃...
    暖暖ren阅读 355评论 1 3
  • 刚送走阖家团圆的中秋, 又迎来举国欢腾的国庆, 在这平凡而美好的秋日, 与你携手同游泛舟碧波。 不去管身旁陌生的朋...
    莫若一笑尽释阅读 155评论 0 0
  • 你把泪水盛在眼眶 于上仰的四十五度 把整个天空尽收眼底 灰蒙的 迷乱的 这片天空有雪在飘 票进行人心窝里背后的脚印...
    南衣c阅读 59评论 0 1