VUE基础知识点

学习vue，顺手记录下的基础点笔记。

一定要有随手保存代码的习惯，除非你的开发工具设置了自动保存。

1. 组件使用

• 组件定义时名称为驼峰，例如HelloWorld，但在html里使用时用小写字母横杆连接，hello-world

• 自定义的组件在single-file components(.vue文件)/string template/jsx中使用时采用自闭合单标签形式，但是在html中使用时，要采用双标签，自闭合的单标签在默认情况下根本不管用。例如：<app/><hello-world/>这种写法浏览器只会渲染<app>组件，而会把<hello-world/>认为是<app></app>内容以至于被<app>的template覆盖了

2. 关于scoped

• <style scoped></style>style标签加上scoped属性，是指这里包含的css样式只会应用在包含它的组件的元素上
• 同一个组件里，既可以有加scoped属性的style标签，也可以有不加scoped属性的style标签，它们作用域不同，前者是组件内，后者是全局范围生效（一般不这么用，全局的还是写在全局的css文件里）
• 加了scoped的样式不会影响子组件里的元素，只会影响子组件的根节点
• 如果想要父组件的加了scoped的样式影响到子组件，可以用>>> combinator，但有些预处理器可能不认>>> combinator，这种情况下可以用/deep/或者::v-deep代替，这俩是>>>的别名，效果完全一样。例如.a >>> .b { }，可以影响子组件中的class名是b的元素的样式
• 当加了scoped的样式里有属性选择器时，浏览器渲染样式会几倍的慢，建议使用类选择器或id选择器，就跟不加scoped的性能差不多了

3. ref属性

• 用于快速定位到dom结构。

  html使用<div ref='test'></div>

  js使用this.$refs.test => div这个元素对象

4. @import ‘./*.css’

5. ‘./a.css’和’…/a.css’区别

6. assets文件夹和static文件夹

• assets文件夹，主要放项目里用到的图片等静态资源
• static文件夹，主要放第三方的静态资源，比如字体

7. v-if例子和v-show例子

<!-- flag变量值为1时显示aa，2时显示bb，其他情况显示cc -->
<p v-if="flag === 1">aa</p>
<p v-else-if="flag === 2">bb</p>
<p v-else>cc</p>

<!-- flag为1时显示aa -->
<span v-show="flag === 1">aa</span>

8. v-show和v-if区别

v-if条件不符合时不会渲染对应元素

v-show条件不符合时会渲染对应元素，但样式设为display:none;

所以在选择使用哪个时，看使用场景，如果值不会频繁变化，就用v-if，但如果值会频繁变化时，使用v-show性能更好一些，因为v-if的元素切换时要渲染DOM元素这个过程是需要大量计算的，所以出于性能考虑我们一般是不赞成频繁进行DOM元素渲染的。

9. v-for遍历数组和遍历对象例子

<!-- 循环arr数组，每条数据显示顺序号和name属性 -->
<ul>
    <li v-for="(item, index) in arr" :key="item.id">		<span>{{index + 1}}-{{item.name}}</span>
    </li>
</ul>

<!-- 循环obj对象，每条数据显示顺序号-key-value -->
<ul>
    <li v-for="(value, key, idx) in obj" :key="key">
    	{{idx + 1}}-{{key}}-{{value}}
    </li>
</ul>

10. v-for跟v-if不建议一起用，有需要这样用的场景，可以使用computed属性，v-for绑定对原始数组进行filter之后返回的数组

11. 动态属性，比如<span v-bind:id='myId'>ss</span> myId是data里定义的变量，简写就是<span :id="myId">ss</span>。

动态class的两种写法，对象和数组，当然也可以是单个变量

<span :class="{class1: hasClass1, class2: hasClass2}">ss</span>其中hasClass1和hasClass2是布尔型变量

<span :class=[class1, class2]>ss</span>其中class1和class2是字符串型变量，class名

动态style绑定的是对象，其中样式名称用驼峰写法例如font-size写成fontSize

12. v-html有xss风险，会覆盖标签内容和子组件

13. vue事件中不用传参数时可以直接获取到event，有参数时需要把event参数传到事件处理函数中；vue的event参数是原生的，event.target是引起触发事件的元素，event.currentTarget是事件处理函数挂载的元素

14. `带格式的字符串`，这个符号包起来的字符串可以有格式，不需要写\n之类的换行

15. computed有缓存，data不变就不会重新计算；watch默认是浅度监听，就是只监听表层变化，除非设置deep:true（配合handler）才会递归遍历监听对象各属性进行watch；watch如果监听引用类型是拿不到oldVal的

16. computed使用

export default {
	data () {
		return {
			num: 1, // 值类型
            obj: { // 引用类型
                pro: '哈哈'
            }
		}
	},
	computed: {
		com1() { // 跟get方式一样
			return this.num + 1
		},
		com2: { // get set方式
			get() {
				return this.num + 1
			},
			set(val) {
				this.num = val - 1
			}
		}
	},
    watch: {
        num(oldVal, val) {
            console.log('watch', oldVal, val);
        },
        obj: {
            handler(oldVal, val) {
                console.log('deep watch', oldVal, val)
            },
            deep: true // 深度监听
        }
    }
}
// 使用时
<span>{{num}}</span>
<span>{{com1}}</span>
<span>{{com2}}</span>
<input v-model="com2" />

17. 事件修饰符

<!-- stop阻止事件继续传播 -->
<div v-on:click.stop="func"></div>
<!-- prevent阻止事件默认行为，例如submit事件的重载页面，a标签点击跳转等 -->
<form v-on:submit.prevent="func"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="func"></a>
<!-- 可以只有修饰符不加事件处理 -->
<form v-on:submit.prevent></form>
<!-- capture事件捕获期的事件处理函数 -->
<div v-on:click.capture="func">...</div>
<!-- self只有event.target是当前元素时触发的处理函数 -->
<div v-on:click.self="func">...</div>

18. 按键修饰符

.ctrl .alt .shift .meta
.enter .tab .delete .esc .space .up .down .left .right
<!-- 只要按下指定键，就算有其他按键一起按下也会触发 -->
<button v-on:keyup.ctrl="func">xx</button>
<!-- exact，只按下指定键时触发 -->
<button v-on:keyup.ctrl.exact="func">xx</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:keyup.exact="func">xx</button>

19. 表单修饰符

<!-- trim去掉首尾的空格 -->
<input v-model.trim="myInput" />
<!-- lazy防抖，从input触发变成change触发，离开输入框才进行输入的内容跟数据绑定的内容进行同步，因为v-model默认是每次值变化都会同步数据，所以可能造成画面抖动 -->
<input v-model.lazy="myInput" />
<!-- number把输入的内容转换成数字，因为默认输入的都会变成字符串，加上number修饰符就可以把输入的数字转化成数值型，对非数字内容不起作用 -->
<input v-model.number="myInput" />

20. 页面回到顶部

<div id="headDiv"></div>
// 调用headDiv.scrollIntoView()使顶部div可见达到目的

21. slot 插槽

父组件往子组件里插入内容

<!-- 常规使用 -->
<!-- 子组件 -->
<template>
    <p>
        <slot>
            默认显示，当父组件没有往子组件插入内容
        </slot>
    </p>
</template>
<!-- 父组件 -->
<myComponent>
	{{parentData.title}}
</myComponent>

<!-- 如果父组件想插入子组件的值 -->
<!-- 子组件 -->
<template>
    <p>
        <slot :childData="childDa">
            默认显示，当父组件没有往子组件插入内容
        </slot>
    </p>
</template>
<!-- 父组件 -->
<myComponent>
    <template v-slot="props">
        {{props.childData.property}}
    </template>
</myComponent>

<!-- 具名插槽：子组件好几个slot设置name -->
<!-- 子组件 -->
<template>
    <p>
        <slot name="slot1"></slot>
    </p>
	<p>
        <slot></slot>
    </p>
    <p>
        <slot name="slot2"></slot>
    </p>
</template>
<!-- 父组件 -->
<myComponent>
	<template v-slot:slot1></template>
    <template></template>
    <template #slot2></template>
</myComponent>

22. 动态组件

<component :is="namename" />

23. $nextTick

页面数据更改后立刻获取DOM元素，不会获取到最新的，因为还没有渲染，这时想要得到最新的DOM，可以把访问DOM的代码放到$nextTick里。$nextTick是基于Promise.resolve().then()执行的回调，所以会比setTimeout的回调执行的早一些，效率高。

export default {
    data() {
        return {
            list: ['1', '2']
        }
    }
    methods: {
        test() {
            this.list.push('3')
            this.list.push('4')
            // 访问DOM元素放到$nextTick里
            this.$nextTick(() => {
                console.log(this.$refs.listDom.childNodes.length)
            })
        }
    }
}
// 不管list里push几个，会将data修改做整合，都只会渲染一次，异步渲染，$nextTick会在DOM渲染完之后回调。
// 上面代码如果不把访问DOM放到$nextTick里，它会打印出来2也就是push前的长度而不是我们需要的4.

24. 异步组件

// 如果直接在这import就不是异步的，加载这个页面时就会加载组件
// import asyncComponent from './asyncComponent'
export default {
	components: {
		asyncComponent: () => import('../asyncComponent')
	}
}

25. keep-alive

场景：缓存组件，tab频繁切换不需要重复渲染的情况，性能优化方式之一

当然，如果组件比较简单，也可以用v-show通过原生css来控制

使用方式：

<keep-alive>
    <myComponent1 v-if="flag==1"></myComponent1>
    <myComponent2 v-if="flag==2"></myComponent2>
    <myComponent3 v-if="flag==3"></myComponent3>
</keep-alive>

26. 自定义v-model

27. vue生命周期

单个组件：

beforeCreate->created(实例初始化完毕)->beforeMount(生成虚拟DOM)->mounted(DOM渲染完毕)->beforeUpdate->updated->beforeDestroy(要解除自定义事件以及clearTimeout等)->destroyed

实例初始化各项目顺序：props -> methods ->data -> computed -> watch

父子组件：

父组件beforeCreate->父组件created->父组件beforeMount->子组件beforeCreate->子组件created->子组件beforeMount->子组件mounted->父组件mounted->父组件beforeUpdate->子组件beforeUpdate->子组件updated->父组件updated->父组件beforeDestroy->子组件beforedestroy->子组件destroyed->父组件destroyed

总结：初始化实例是父组件先初始化完毕，渲染是子组件先渲染完毕，更新是父先开始，子先更新完毕，销毁是父先开始销毁，子组件先销毁完毕。

28. 组件间通讯

父传子：props

子传父：this.$emit(‘事件名’，参数)

其他级别组件：event.$on(‘自定义事件名’，处理函数)

触发时使用event.$emit(‘自定义事件名’，参数)

组件销毁时移除自定义事件防止内存溢出 event.$off(‘自定义事件名’，处理函数)

29. mixin

mixin慎用，可能造成代码混乱，不易理解维护。