Vue第三天笔记

一、组件的介绍

1.组件的本质就是一个自定义的标签

• 我们之前学过的Vue指令本身其实就是一个自定义的属性

• 默认的标签：只有html结构

• 组件的三个组成部分 ：html结构 + js业务 + css样式

2. 一个组件就相当于一个vue的实例

       组件的作用 ： 盒子复用

3.在vue项目开发中，组件与页面的关系如下

• 页面 = 盒子 = 组件 = .vue文件 = html+css+js

二、组件的基本使用 

1.在终端中输入 vue create 01-components 创建一个脚手架 

2.关闭eslint代码检查(如果不关闭,会因为某些单词导致项目编译错误

*vue.config.js中设置:lintOnSave:false*

3.删除默认组件:components里面的helloworld.vue文件

4.清空App.vue文件内容,使用<>快捷键重新创建内容

5.运行项目:npm run serve(不用关闭终端)

三、为什么vue的data数据中是函数而不是对象?(面试题)

因为vue中的组件在很多个地方需要复用,为什么不使用对象主要是怕重复创建实例造成多实例共享一个数据对象. 

如果data中的数据是对象的话,那么在多个地方引用同一个对象 拷贝的都是同一个堆地址,就会造成牵一发而动全身的局面,对多个页面造成影响.

函数的话,每一次调用都会返回一个新的对象,那么在某些地方更改其中的数据的时候,就不会对其他页面造成影响,所以vue的data数据中一定要是函数,而不能是对象,这样就可以解决多个实例对象数据共享对其他页面造成的干扰问题

四、局部组件和全局组件区别

 局部组件 ： 在哪里用就在哪里注册 （用一次，注册一次）

五、scoped工作原理

1.默认情祝下，如果父组件和子组件有相同的选择器权重，优先加载父组件样式
2.如果希望子组件加载自己的样式，就可以使用scoped
(1)scoped作用：设置组件的css作用域
(2)scoped工作原理：
给组件添加一个自定义属性data-v-xxx,增加子组件的选择器权重.

六、为什么要进行组件传值

（1）首先组件的作用是复用的，一个组件需要在很多个页面被使用， 不同的页面需要渲染的数据不同。 子组件自己不应该把数据写死。 而是父组件获取数据，传递给子组件来渲染
（2）服务器一般会给一个对象数组给我们， 如果我们在父组件获取到这个数组，然后传递给子组件（这样就只需要获取一次）。 如果我们在子组件获取这个数组，由于子组件可能会被多次加载。就会导致数据的重复获取。 

七、单向数据流

1.单向数据流：vue规定，父组件传递给子组件的数据是只读的.
说人话：当数据是从父组件的属性中传递过来的时候，子组件不要直接去修改。
2单向数据流原因：子组件修改了父组件传递过来的数据，不会通知父组件。就会造成数据不统一问题
3细节：引用类型赋值本质是赋值地址，一但修改互相影响，非常不便于维护