1.data有什么作用 为什么要返回一个对象. 他是怎么取值和赋值的
- 作用 定义变量供页面使用
- 对象是引用数据类型，直接创建一个对象会导致所有的组件 共享同一个地址空间的数据。确保每次返回的对象引用地址都是独立的，不会影响其他的组件
- 取值 我们直接在页面标签里面写上 {{变量名}}
- 赋值或改变里面的值我们直接 this.变量名 它this指向是Vuecompoent
2.谈一谈你对components的理解。怎么去使用它
- 他就是一个公共组件的创建，还有业务组件，以及我们页面的组件。组件名必须使用大驼峰的语法，使用的话如果我们在页面组件里面使用的话我们直接在页面的文件夹。在创建文件，在页面组件对他进行导入，在注册，
最后我们在页面利用标签的方式使用它。 可以实现我们页面借助vue-router 跳转页面
3.谈一谈你对vue的指令并说出他能干什么？
- 我把它总结为5类 1.操作文本 2.判断指令 3.循环指令 4.属性绑定 5.事件绑定
操作文本：
v-text：输出静态文本到页面上
v-html“输出带有html标签的静态文本到页面上
v-text v-html {{}} 不同点
v-text v-html 和Mustach语法区别
mustach语法更多的是用在单个数据的拼接渲染mustach更多的是写在标签的内容里面
判断指令
v-show：display:none 实现dom节点显隐切换
v-if：增加 删除dom 实现dom节点显隐切换
v-else-if
v-else
循环指令
:key=“整个组件唯一值”如果同一个组件中 出现了多个循环 注意：key 不要重复，如果已经重复了【】
为什么加key值 diff 算法比对时性能更高，直接根据标记快速找到真实dom 进行覆盖渲染。
v-for 和v-if 都需要使用时v-for 和v-if 不能写在同一个dom上
解决方案 v-if 提到 v-for 前面dom ，v-if 当道 v-for 循环体中dom上
如果在 <template> 上 使用 v-for 循环:key 不能写到template 标签上，原因：:key是为了给dom 加唯一标记template 无意义标签 不会生成dom
属性绑定
v-bind:属性名="属性值"
静态属性：值 是字符串xxx="嘻嘻嘻"
动态属性：值 是 表达式 :属性名=“属性值”
事件绑定
v-on:事件类型=“执行函数($event)”
事件对象 $event @事件类型=“执行函数”
4.methods
- 方法函数定义：对象的简写 使用：this.函数名()可以在 事件绑定执行函数，钩子函数中
5.filters 过滤器
过滤器
<span > {{str | setStr }} <span>
filters:{
setStr(str){
return 'xxx'+str
}
}
filters 和methods 区别：
filters 必须有return
filters获取不到data 中定义变量
filters 调用时不需要加()
6.watch 监听器
侦听器 监听器
作用:监听数据的变化
watch:{
name(newVal,oldVal){
}
}
watch的问题： 引用数据类型的监听 失效
对象新增属性的操作
数组[索引]=100
7.computed 计算属性
计算属性
作用： 进行比较复杂的逻辑计算 返回一个数据
特点：数据缓存：如果参与计算的原始数据 未发生改变，函数体就不会重新执行
computed:{
}
8.computd methods watch filters 的区别
computed
参与计算的数据 只要发生了改变 重新返回新的结果
computed 的性能比methods 高
依赖缓存：只要在computed中参与运算的数据源没有发生改变，computed 函数体 不会重复执行
computed 和 watch 的区别
watch 能做的事情 computed 都可以实现
1.语法层面不同
computed 写return --计算完成之后的数据 放到vueComponent 实例上
watch 的函数 是自动的触发 不需要 代码调用
computed 页面中 写一次 调用
{{计算函数函数名}}
2.调用次数不同
computed 进入页面瞬间 自动调用一次
watch 数据如果没有发生改变 是不会触发的,进入页面的瞬间 是不会调用的
filters 和methods 的区别
filters 能做的事情 methods 都可以实现 ，而且 性能 没有区别
filters 和methods 只有语法区别
filters 在vue3.x 被取消了
9.组件通信
跨页面传值 页面组件与页面组件的传值
url?key=val
this.$route.query
本地存储
localStorage
sessionStorage
父传子
父组件 通过属性 传参
子组件接受 props
props:['属性',‘属性2’],
子传父
子组件里面写
this.$emit('自定义事件类型'，传递的数据),
父组件里面写
<子组件标签 @自定义事件类型="执行函数"> <子组件标签>
methods:{
执行函数(传递数据形参){}
}
$bus乱传
main.js 创建中央事件总线 Vue.prototype.$bus = new Vue()
//传值的组件 this.$bus.$emit('自定义事件类型',传递的数据)
//接收值的组件 this.$bus.$on('自定义事件类型',(data)=>{})
缺陷：不能跨页面 （$emit 事件触发 $on 事件监听 同一个页面中）不方便后期代码管理和维护
provide inject 祖宗注入
父组件中间商 动态属性传值 $attrs $listeners
10.插槽 slot
将父组件中的html代码传递给子组件进行替换
将父组件的html代码替换掉 子组件预留的位置<slot>
1.匿名插槽
父组件里面写
<子组件>
直接在标签里面写html的代码
</子组件>
子组件里面写
<div>
<slot> </slot>
<div>
2.具名插槽 有名字的插槽
子组件里面写
<div>
<slot name ="title"></slot>
</div>
父组件写
<子组件>
<p slot='title'></p>
</子组件>
3.作用域插槽
父组件
<app-header >
<div slot="more" slot-scope="scope">
详情 {{scope.num}}
</div>
</app-header>
子组件里面写
<div>
<div>子组件自己的代码 </div>
<slot name="more" :num="1000" > </slot>
</div>
v-slot
<app-header >
<div v-slot="more" slot-scope="scope">
详情 {{scope.num}}
</div>
</app-header>
简写
<app-header >
<template #more="scope">
<div >
详情 {{scope.num}}
</div>
</template>
</app-header>
