Vue2，Vue3特性和区别

一、框架设计模式 MVC MVP MVVM
	MVC  Model数据层，View视图层，Controller控制层，代表性框架，agular 
	MVP  Persente代理层，代表性框架：metor
	MVVM Model:存储数据，View:数据展示
		View-Model数据绑定层，代表性框架：vue
二、vue特性
	1、常规DOM操作-->通过选择器找到dom节点，进行读取、赋值
		id选择器是全局变量，指元素本身，容易造成数据污染
	2、命令式编程
	  （1）通过特殊语法，添加自定义属性进行数据、事件绑定，减少dom操作
	  （2）cmd-->新建文件夹-->cd 文件名-->cv vue.min.js-->新建Index.html-->拷贝bootstrap.css-->Index.html内link引入bootstrap、引入vue.min.js-->安装bootstrap3插件
	  （3）完成一个表单
            bs3-container
            bs3-alert
三、Vue为构造函数, new Vue()  V2写法
	vue框架是MVVM，必须实现：定义数据、实现数据和视图绑定关系、指定视图
	所有数据都是通过参数传递实现
	let vm = new Vue({
		data:{
			name:'',
             html: '<button>测试按钮</button>'
		},
		el:'#root'  //root为id选择器
	})
    或者$mount实现挂载
		vm.$mount('#root')  //与Vue3最大的区别
	模板语法： <p>{{name}}</p>
	指令语法：<p v-text='name'></p>  //innerText
			<p v-html='html'></p>
	双向绑定： v-model

一、Vue3学习

	Vue.js官网--> vue源码js文件-->CV到vue.global.js文件
	（1）区别：Vue2 OOP（面向对象）编程， Vue3侧重于 FP（函数式编程），也可选项式编程
    bs3-panel实现双向绑定
	（2）写法
        <div id='root'>内容</div>   //domTree
	<script>
        //创建vue实例对象
        var app = Vue.createApp({
            //绑定数据到vue框架的Model层
            data(){ 
                return{
                    value:10
                }
            }
        })  
	   app.mount('#root')  //将实例挂载到id为root的dom节点上
    </script>
	
	（3）注意：
    	data必须为工厂函数，因为组件是多例的，如果data为对象，则所有组件实例对象共用一个data，产生全局污染
	 (4)修饰符
           <input v-model.number='value'></input>
			.number 或 .trim 等，也可组合
		Vue2的bug:number修饰符第一个不能输入非数字，否则会失效，解决：type='number'

示例：表格展示列表数据 bootstrap插件
list：Array(10).fill().map((item,index,rows) =>
        ({
           name: '张三'+i,
           age: Math.ceil(Math.random()*10 +20),
           sex: Math.random()> .5 ? '女' ：'男'
        })  //不写括号会被认为方法体，不会自动return
	 })
	Array.map((item,index,arr))参数：
    参1：item，当前元素的值
    参2：index,可选，当前元素在数组中的索引值，
    参3：arr，当前元素属于的数组对象
    
 scrpit内：
    1、创建一个应用实例
    2、使用data工厂函数往实例中注入model数据 
    3、把实例挂载到view容器上
 v-if、v-show

疑问？
    1、修改this指向：call,apply,bind,箭头函数，call,apply,bind的区别？
		(1)call和apply会立即调用函数
        （2）call和bind的参数是对象，apply是数组传参
        （3）bind会返回一个新函数
        
    2、数组for循环方法：forEach, map, for of， for in(v-for指令)
	   (1)for of 和 for in的区别：
       	  for in 可以遍历对象、数组，
          for of 只可遍历数组
        (2)forEach 和 map 区别：
          forEach 返回的是undefined,用来遍历数组中的每项，不影响原数组
		  map 返回一个新数组，不会改变原数组
          
	3、箭头函数特点？   //ES6新增
    	(1)无自己的this(执行上下文) 和 arguments;
    	(2)是匿名函数，不能作为构造函数，不能new ;
         (3)函数体只有一句话，可省略大括号，并自动return
         
    4、伪条件渲染v-show常用于频繁切换的节点，反之使用条件渲染v-if
    
    5、link和@import区别？
	 （1）link属于html标签，@import在css中使用表示导入外部样式表；
	 （2）页面被加载时，link异步加载，@import同步加载
	 （3）link是html标签，无兼容性，而import在IE5以上才识别；
     （4）link样式权重高于import;
	  (5) link支持ts使用；
      
	6、数组去重new Set()  // ES6新增
       let arr = [1, 2, 2, 3]; 
	   let set = new Set(arr)
       let newArr = Arrayy.from(set)  //转为真正的数组
    7、mock数据
        Array.from(
            Array(9), 
            function(item,index,rows){
                return {
                    id:'todo'+index
             }，
             null 
          })