这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战。
一：mixins相当于key的合并，是一个数组，但是在vue2里面，有两大问题：1 来源不清晰 2 命名会重复 和组件的概念强绑定，属于组件的逻辑。用mixins来进行抽离。引申：在mounted进行定义，如果不进行释放掉，会进行事件内存泄漏。
二：自定义指令：v-if v-for官方提供的指令
还可以自定义指令：适用场景：1.for组建中，有input，<for> <input type="text"> </for>
需求：让input自动聚焦，
问题：我们能用数据驱动视图吗 ？不能
原因：聚焦的话，我们得获取到input的实例来调用它的方法，input.focus方法。通用的；聚焦的逻辑是公共的适用场景，特别频繁
方法：用真实的element调用focus方法
怎么做：自定义指令来去解决
Vue.derective("创建的聚焦的名称focus",
{
bind(el,binding)
}//相当于初始化created，第一次绑定元素时调用的
inserte(){
}//相当于mounted ps：命令统一在vue3里会进行统一
})
在对应的组件内进行使用，el：拿到的元素，binding 一系列的数据
使用的时候 input v-focus>
这里聚焦的话只能聚焦一个点 剩余的指令官网上有 跟vue的生命周期一样
ps：根元素只能有一个
三：掌握单文件
问题：从问题出发 找出解决方案
我们之前创建vue的时候，用npm init ，再用npm i vue,在页面中直接写脚本，const app=new Vue({})，如果有组件，const Foo={ template:"<div></div"},这么写很麻烦，是个字符串，没有任何的提示,没有类型高亮语法提示，效率低，怎么解决
解决方案：vue给了一个创建方式，创建文件后缀名.vue 这种文件叫做单文件组件
好处:
1 组件必须要写一个template，这时候代码自动补齐，有对应的提示吗
2.可以通过script创建标签 ，可以去写js逻辑，默认导出对象，之前组件里面的data等都可以在这里进行
3.css也可以在单页面里写
所以单文件有template（html），js ，css
