vue知识总结

最新推荐文章于 2022-09-14 11:14:31 发布

置顶单纯些

最新推荐文章于 2022-09-14 11:14:31 发布

阅读量183

点赞数 1

文章标签： vue知识总结

本文链接：https://blog.csdn.net/simple2321/article/details/103260844

版权

vue知识总结

1.vue生命周期

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后
第一次页面加载会触发那几个钩子？
第一次页面加载时会触发beforeCreate,created,beforeMount,mounted
DOM渲染在哪个周期中就已经完成？
DOM渲染在mounted中就已经完成了

nextTick:更新数据后立即操作dom

2.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if
V-if=’false’v-if是条件渲染，当false的时候不会渲染
使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成
v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

3.computed和watch有什么区别

computed:
computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch:
更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行小结:
当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

4.表单输入修饰符

1）v-model 在每次 input 事件触发后将输入框的值与数据进行同步如:
input v-model.lazy=“msg”
2) 如果想自动将用户的输入值转为数值类型
input v-model.number=“age” type=“number”
3) 如果要自动过滤用户输入的首尾空白字符
input v-model.trim=“msg”

5.模板字符串

1）描述：模板字符串使用反引号 ``来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数。
2）用法：
在这里插入图片描述
3) 嵌套模板

6.组件间进行动态切换

可以通过 Vue 的元素加一个特殊的 is 特性来实现示例如下：
组件a.vue

<template>
  <div>
    <component :is="who"></component>
    <button @click="changeComponent">我变换</button>
  </div>
</template>
<script>
import componenta from '@/pages/componenta';
import componentb from '@/pages/componentb'
export default {
  components:{
    componenta,
    componentb
  },
  data(){
    return{
      who:'componenta'
    }
  },
  methods:{
    changeComponent(){
      if(this.who=='componenta'){
                    this.who='componentb'
                }else{
                    this.who='componenta'
                }
    }
  }
}
</script>

组件componenta.vue

<template>
  <div style="color:red">我是 componentA</div>
</template>

组件componentb.vue

<template>
  <div style="color:red">我是 componentB</div>
</template>

7.git和svn区别与git和github区别

1） Git 与 SVN 区别点：

1、GIT是分布式的，SVN不是：这是GIT和其它非分布式的版本控制系统，例如SVN，CVS等，最核心的区别。

2、GIT把内容按元数据方式存储，而SVN是按文件：所有的资源控制系统都是把文件的元信息隐藏在一个类似.svn,.cvs等的文件夹里。

3、GIT分支和SVN的分支不同：分支在SVN中一点不特别，就是版本库中的另外的一个目录。

4、GIT没有一个全局的版本号，而SVN有：目前为止这是跟SVN相比GIT缺少的最大的一个特征。

5、GIT的内容完整性要优于SVN：GIT的内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性，确保在遇到磁盘故障和网络问题时降低对版本库的破坏。

2) github 和 git的区别
git是一个分布式版本控制系统，不同类型的版本控制软件还有svn，mercurial，vss，SourceAnywhere等。

Github是一个集成了git的服务。它可以以网页或者客户端的形式，帮助用户把git本地的数据提交到远程的服务器里。同样的服务还有git oschina，git 京东，git csdn。这些服务都是免费的。

8.数据类型之Symbol

（可以理解成独立的不同地址空间）

8类数据类型：Undefined、Null、Number、String、Boolean、Symbol、Object、 Function(object)

1） ES5 的对象属性名都是字符串，这容易造成属性名的冲突，所以ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。
2） Symbol 值通过Symbol函数生成。
3） Symbol 函数可以接受一个字符串作为参数，表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。
4） ES2019 提供了一个实例属性description，直接返回 Symbol 的描述。
5） Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。
6） Symbol 值作为对象属性名时，不能用点运算符,要使用[]。
7） Symbol 值作为属性名时，该属性还是公开属性，不是私有属性。
8） Object.getOwnPropertySymbols()可以获取所有 Symbol 属性名。（返回的格式是数组）
9） Reflect.ownKeys()可以返回所有类型的键名，包括常规键名和 Symbol 键名。（返回的格式是数组）
10） Symbol.for()方法可以做到重新使用同一个 Symbol 值（都是同样参数的Symbol.for方法生成的）

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');

s1 === s2 // true

10） Symbol.for()与Symbol()区别：

（1）前者会被登记在全局环境中供搜索不管有没有在全局环境运行，后者Symbol()写法没有登记机制，所以每次调用都会返回一个不同的值。
（2）前者会先检查给定的key是否已经存在，如果不存在会新建一个值，后者每次都是新建，例如：Symbol.for(“cat”)30 次，每次都会返回同一个 Symbol 值，但是调用Symbol(“cat”)30 次，会返回 30 个不同的 Symbol 值。
11） Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key。

12）内置的Symbol值

（1）对象的Symbol.hasInstance属性，指向一个内部方法。该实例的Symbol.hasInstance方法，会在进行instanceof运算时自动调用

class MyClass {  等同   const  MyClass {  
  [Symbol.hasInstance](foo) {
    debugger
    return foo instanceof Array;
  }
}

[1, 2, 3] instanceof new MyClass() // true

console.log([1, 2, 3] instanceof new MyClass() );//true

9.axios端口通信

post请求头headers:{‘Content-Type’:‘multipart/form-data’}适用于包含流（入上传图片，excel，doc等）信息的表单提交
headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}适用于不包含流信息的普通表单提交提交
在这里插入图片描述

10.vue store 存储 dispatch 和 commit的区别

存储：

this.$store.dispatch('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

存储：

this.$store.commit('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

单纯些

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识总结

vue知识总结1.vue生命周期**它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后第一次页面加载会触发那几个钩子？第一次页面加载时会触发beforeCreate,created,beforeMount,mountedDOM渲染在哪个周期中就已经完成？DOM渲染在mounted中就已经完成了nextTick:更新数据后立即操作dom2.v-show与v-i...
复制链接

扫一扫