Vue2&Vue3学习

ValcanoZz

已于 2023-11-15 15:45:32 修改

阅读量181

点赞数

分类专栏： Java Web 文章标签：学习笔记 vue.js

于 2023-11-07 18:24:01 首次发布

本文链接：https://blog.csdn.net/m0_51970364/article/details/134273314

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

Vue2

Vue是一套前端框架，免除原生JavaScripte中的DOM操作，简化书写。

基于MWM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

M：模型(Model) ：data中的数据
V：视图(View) ：模板代码
VM：视图模型(ViewModel)：Vue实例

其中 ViewModel 由Vue提供； 而data中所有属性会通过代理由vm进行管理。

Vue数据代理的原理：

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

使用：

声明

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

创建Vue实例和容器

<body>
    <!-- 
        vue实例和容器是一一对应的;
        正式开发中只有一个Vue实例，且配合组件一起使用;
        {{xxx}}中的xxx要写js表达式(变量,运算式,函数调用等); 
    -->
    
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>hello {{name}}</h1>
    </div>
</body>

<script>
    Vue.config.productionTip = false //阻止vue在启动时生产提示(本地url地址时没接网络可能报一些错，但不影响运行)

    //创建Vue实例
    new Vue({
        el: '#root',    //el用于指定当前Vue示例为哪个容器服务
        data: {         //data中用于存储数据，数据供el指定的容器所使用
            name: 'valcanoZz'
        },
    })
</script>

基本使用

模板语法

插值语法 —— 用于解析标签体内容。
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：—— 用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：v-bind: href=“xxx” 或简写为 :href=“xxx”，xxx同样要写js表达式，
  且可以直接读取到data中的所有属性。
- 注：Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举个例子。

<body>
    <div id="app">
        <!-- 用于标签体内容中 -->
        <h1>插值语法 --> {{name}}</h1>
        <!-- 用于标签属性中 -->
        <a v-bind:href="url">指令语法</a>
        <a :href="url">指令语法 v-bind:的简写</a>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#app',
        data: {
            name: 'zzc',
            url: 'http://www.baidu.com'
        }
    })
</script>

数据绑定

单向数据绑定（v-bind）—— 数据只能从data流向页面；
双向数据绑定（v-model）—— 数据不仅能从data流向页面，还可以从页面流向data；

v-model 只能用于表单类元素，因为只有表单类元素才有需求更改数据。

<body>
    <div id="app">
        单向数据绑定：<input type="text" :value="name"><br />
        
        <!-- v-model只能用于表单类元素，即需要输入的元素 -->
        双向数据绑定：<input type="text" v-model:value="name"><br>
        <!-- v-model:value 可以简写为v-model,因为v-model默认只接受value值 -->
        双向数据绑定简写：<input type="text" v-model="name">
        
    </div>
</body>

<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#app',
        data: {
            name: 'zzc',
        }
    })
</script>

el与data的写法

一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，就不再是Vue实例了。

<body>
    <div id="app">
        <h1>你好,{{name}}</h1>
    </div>
</body>

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#app',         //el第一种写法
        data: {                 //data第一种写法：对象式
            name: 'zzc',
        }
    })

    //el第二种写法
    vm.$mount('#app')  //更灵活, 比如可以等1秒后再让Vue挂载容器
    
    //data的第二写法：函数式 —————— 组件必须采用函数式
    //注意：data不要写箭头函数，否侧Vue实例调用不到，调用者往外为window
    new Vue({
        el: '#app',
        data() {
            console.log('@@@',this) //此处的this是Vue实例对象
            return {
                name:'zzc'
            }
        },
    })
</script>

事件处理

事件绑定 —— v-on

可简写为 @ ；加上小括号也可以传参进去，如果需要接受event对象，要加上$event进行占位；

事件修饰符

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

<body>
    <div id="app">
        <h1>你好,{{name}}</h1>
        <button v-on:click="showInfo1">事件绑定: v-on</button>
        <button @click="showInfo1">事件绑定的简写: 换成@</button>
        <button @click="showInfo2(66,$event)">事件绑定: 传参进去，$event作为占位符给event对象</button>
        
        <!-- 添加事件修饰符 -->
        <div id="app">
        <a href="http://wwww.baidu.com" @click.prevent="showInfo">事件绑定，加".prevent"可阻止默认事件</a>
    </div>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {             
            name: 'zzc',
        },
        methods: {                  //在methods中配置函数
            showInfo1(event) {
                console.log(event.target);  //event.target是触发事件的对象，即button标签
                console.log(this);  //这里this是v，即vue实例
            },
            showInfo2(a, b) {
                console.log(a, b);
            }
        },
    })
</script>

键盘事件

使用 @keydown.按键别名 和 @keydown.按键别名 来使用键盘事件。

Vue中常用的按键别名：

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

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

系统修饰键（用法特殊）：ctrl、alt、shift、meta

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

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

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

<body>
	<div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    new Vue({
        el:'#root',
        data:{
            name:'zzc'
        },
        methods: {
            showInfo(e){
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
</script>

计算属性computed

定义：要用的属性不存在，要通过已有属性计算得来。

原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

get函数什么时候执行？

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

注：

计算属性最终会出现在 Vue实例上，直接读取使用即可。

如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br /><br />
        名：<input type="text" v-model="lastName"> <br /><br />
        全名：<span>{{firstName}}-{{lastName}}</span><br /><br /> <!-- 插值语法实现 -->
        全名：<span>{{fullName1()}}</span><br /><br /> <!-- methods实现 -->
        全名：<span>{{fullName2}}</span><br /><br /> <!-- 计算属性实现， Vue认为data里的都是属性 -->
        全名：<input type="text" v-model="fullName2"> <br /><br />
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            firstName: '张',
            lastName: '三'
        },
        methods: {
            fullName1() {           //没有缓存, 每调用一次就执行一次; 而计算属性有缓存，只在初次读和数据变化时才执行
                return this.firstName + '-' + this.lastName
            }
        },
        computed: {
            fullName2: {
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get() {
                    // console.log('get被调用了')
                    // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                //set什么时候调用? 当fullName被修改时。
                set(value) {
                    // console.log('set', value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            },
            
            //计算属性时，如果确定只使用get(), 可以简写, 但注意不要和methods混淆了
            fullName3(){
                return this.firstName + '-' + this.lastName
            }
        }
    })
</script>

监视属性watch

监视属性 —— watch

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

深度监视 ——

Vue中的watch默认不监测对象内部值的改变（只管理一层）。
配置deep:true可以监测对象内部值改变（多层）。

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

<body>
    <div id="app">
        <h2>今天天气很 {{info}} </h2>
        <button @click="isHot = !isHot">切换</button>

        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>

        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>

</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1,
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        watch: {
            isHot: {
                immediate: true,// immediate:true, //初始化时让handler调用一下
				//handler什么时候调用？当isHot发生改变时。
                handler(newValue, oldValue) {
                    console.log("isHot被修改了", newValue, oldValue)
                }
            },
            // 当只有handler时,可以简写:
            isHot(newValue, oldValue){
                console.log("isHot被修改了", newValue, oldValue)
            },

            //监视多级结构中某个属性的变化, 要重新加上引号
            'numbers.a': {
                handler() {
                    console.log('a被改变了')
                }
            },
            //监视多级结构中所有属性的变化, 修改属性deep为true
            numbers: {
                deep: true,
                handler() {
                    console.log('numbers改变了')
                }
            }
        },
    })

    //监视功能 还可以在实例外定义使用
    vm.$watch('isHot', {
        immediate: true,
        handler(newValue, oldValue) {
            console.log("isHot被修改了", newValue, oldValue)
        },
    })
</script>

computed和watch区别

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

两个重要的小原则：

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

如：在vue里使用定时器回调函数，要用箭头函数，否则this会指向管理者window；

<script type="text/javascript">
	new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            //修改firstName后，经过1秒再修改fullName
            firstName(val){
                setTimeout(()=>{
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                },1000);
            },
            lastName(val){
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>

监视数据

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。
- 对象中后追加的属性，Vue默认不做响应式处理；
- 如需给后添加的属性做响应式，请使用如下API：
  - Vue.set (target，propertyName/index，value) 或 vm.$set (target，propertyName/index，value)
如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
1. 调用原生对应的方法对数组进行更新。
2. 重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
- 使用这些API： push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  
  push() 向数组的末尾添加一个或者多个元素，并返回新的长度
  
  pop() 删除并返回数组的最后一个元素
  
  shift() 删除并返回数组的第一个元素
  
  unshift() 向数组的开头添加一个或多个元素，并返回新的长度
  
  splice() 删除元素，并向数组添加新元素
  
  sort() 对数组的元素进行排序
  
  reverse() 颠倒数组中元素的顺序
- Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象添加属性！！！即不能增加data中的第一层数据。

<body>
    <div id="root">
        <h2>学生信息</h2>

        <button @click="student.age++">年龄+1</button><br>
        <button @click="addSex">添加性别，默认为男</button><br>
        <button @click="addFriends">在列表首位添加一个朋友</button><br>
        <button @click="updateFriendName">修改第一个朋友的名字: 张三</button><br>
        <button @click="addHobby">添加一个爱好</button><br>
        <button @click="updateHobby">修改第一爱好</button><br>

        <h3>姓名: {{student.name}}</h3>
        <h3>年龄：{{student.age}} </h3>
        <h3>性别：{{student.sex}} </h3>
        <h3>爱好: </h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们: </h3>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} - {{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            student: {
                name: 'tom',
                age: 18,
                hobby: ['书法', '弹琴', '看书'],
                friends: [
                    { name: 'amy', age: 35 },
                    { name: 'tony', age: 36 }
                ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            },
            addFriends(){
                this.student.friends.unshift({name:'aaa',age:40})
            },
            updateFriendName(){
                this.student.friends[0].name = '张三'   //fridends[0]没有生成get和set方法，但里面的属性name和age，都有对应的get和set方法; 只要Vue有生成对应的get和set方法，都可以直接修改(会响应至页面)
            },
            addHobby(){
                this.student.hobby.push('新加的爱好')	//不能直接改hobby[0],因为hobby[0]没有对应的get和set，修改数据后页面并不会响应
            },
            updateHobby(){
                this.student.hobby.splice(0,1,'修改的爱好')     //删掉第0个，添加一个
                Vue.set(this.student.hobby, 1, '另一种修改')
            }

        },
    })
</script>

绑定样式

class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。
- 字符串写法适用于：类名不确定，要动态获取。
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式（用的少）
- :style=“{fontSize: xxx}” 其中xxx是动态值。
- :style=“[a,b]” 其中a、b是样式对象。

<!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 type="text/javascript" src="../js/vue.js"></script>
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy {
            border: 4px solid red;
            ;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg, yellow, pink, orange, yellow);
        }

        .sad {
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }

        .normal {
            background-color: skyblue;
        }

        .sty1 {
            background-color: yellowgreen;
        }

        .sty2 {
            font-size: 30px;
            text-shadow: 2px 2px 10px red;
        }

        .sty3 {
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

        <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

        <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'zzc',
            mood:'normal',
            classArr:['sty1','sty2','sty3'],    //class样式 —— 数组写法
            classObj:{                  //对象写法
                sty1:false,
                sty2:false,
            },
			//style样式 —— 对象写法
            styleObj:{                  
                fontSize: '40px',
                color:'red',
            },
            styleObj2:{
                backgroundColor:'orange'
            },
            //数组写法
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]
        },
        methods: {
            changeMood(){
                //随机使用三种样式之一
                const arr = ['happy','sad','normal']	
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>

</html>

条件渲染

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

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注：使用v-if的时，元素如果被移除了就无法获取到，而使用v-show一定可以获取到。

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
        
        <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2 v-show="1 === 1">欢迎来到{{name}}</h2>

        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>

        <!-- v-else和v-else-if -->
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>

        <!-- v-if与template的配合使用, 可以使用template包裹, 且在渲染时，template会脱去, 不会破坏标签的结构 -->
        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>zzc</h2>
            <h2>广东</h2>
        </template>

    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzc',
            n: 0
        }
    })
</script>

列表渲染

基本列表

使用v-for指令展示列表数据：v-for="(item, index) in items" :key="index"

注：key的选用，最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key也没有问题。

由于操作DOM较耗性能，所以会向模拟出虚拟DOM，与旧的虚拟DOM比较，然后才更新视图；

key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

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

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

旧虚拟DOM中未找到与新虚拟DOM相同的key，则创建新的真实DOM，随后渲染到到页面。

注：直接用index作为key可能引发一些问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM，则会产生错误DOM更新 ==> 界面有问题。

<body>
    <div id="root">
        <!-- <li v-for="(item, index) in items" :key="index"></li> -->
        <h2>人员列表 （遍历数组）</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <h2>汽车信息（遍历对象）</h2>
        <ul>
            <li v-for="(value, k) in car" :key="k">
                {{value}}-{{k}}
            </li>
        </ul>

        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {{char}}-{{index}}
            </li>
        </ul>

        <h2>遍历指定次数 </h2>
        <ul>
            <li v-for="(number,index) in 5" :key="index">
                {{number}}-{{index}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: '张三', age: 18 },
                { id: '002', name: '李四', age: 19 },
                { id: '003', name: '王五', age: 20 },
            ],
            car: {
                name: 'zz',
                price: '70万',
                color: 'red'
            },
            str: 'hello'
        },
    })
</script>

列表过滤

使用watch和computed都可以

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    //#region  使用#region和#endregion可以实现代码折叠
    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                { id: '001', name: '马冬梅', age: 19, sex: '女' },
                { id: '002', name: '周冬雨', age: 20, sex: '女' },
                { id: '003', name: '周杰伦', age: 21, sex: '男' },
                { id: '004', name: '温兆伦', age: 22, sex: '男' }
            ],
            filPerons: []       //筛选后存放数据的数组,如果用原数组的话，数据会丢失
        },
        watch: {
            keyWord: {
                immediate: true,    
                handler(val) {
                    this.filPerons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1       
                    })
                }
            }
        }
    })
    //#endregion

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

收集表单数据

注意事项：

若：<input type=“text”/>，则 v-model收集的是value值，用户输入的就是value值。
若：<input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type=“checkbox”/>
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值true，false）
- 配置input的value属性:
  - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model的初始值是数组，那么收集的的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号: </label>
            <input type="text" id="demo" v-model="userInfo.ccount"><br><br>
            <label for="pass">密码: </label>
            <input type="password" id="pass" v-model="userInfo.password"><br><br>
            <!-- 对于只需要输入数字的时候，type和v-model都应该加上number -->
            年龄: <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="书法">
            学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
            弹琴<input type="checkbox" v-model="userInfo.hobby" value="弹琴"><br><br>
            所属校区:
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijin">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳4</option>
            </select><br><br>
            其他信息:<br> <!-- .lazy是懒收集，在失去焦点的时候才收集数据-->
            <textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="www. baidu.com">《用户协议》</a><br><br>
            <button>提交</button>
        </form>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            userInfo: {
                account: '',
                password: '',
                sex: 'male',
                age: '',
                hobby: [],
                city: 'beijin',
                other: '',
                agree: ''
            }
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this._data))
            }
        },
    })
</script>

过滤器

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

语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

过滤器也可以接收额外参数、多个过滤器也可以串联
过滤器并没有改变原本的数据, 而是产生新的对应的数据

<body>
    <div id="root">
        <!-- 计算属性实现 -->
        <h2>格式化时间: {{fmTime}} </h2>
        <!-- methods实现 -->
        <h2>格式化时间: {{getFmTime()}} </h2>
        <!-- 过滤器实现 -->
        <h2>格式化时间: {{time | timeFormater}} </h2>
        <!-- 过滤器传参 -->
        <h2>格式化时间: {{time | timeFormater('YYYY-MM-DD') | mySlice}} </h2>
    </div>
</body>
<script>
    //全局过滤器
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })

    new Vue({
        el: '#root',
        data: {
            time: 1621561377603
        },
        computed: {
            fmTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods: {
            getFmTime() {
                return dayjs().format('YYYY-MM-DD HH:mm:ss')
            }
        },
        //局部过滤器
        filters: {
            timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
                return dayjs(value).format(str)
            },
        }
    })
</script>

内置指令/自定义指令

常见指令：

v-bind —— 单向绑定解析表达式, 可简写为 :xxx
v-model —— 双向数据绑定
v-for —— 遍历数组/对象/字符串
v-on —— 绑定事件监听, 可简写为@
v-if —— 条件渲染（动态控制节点是否存存在）
v-else —— 条件渲染（动态控制节点是否存存在）
v-show —— 条件渲染 (动态控制节点是否展示)
v-once —— v-once所在节点在初次动态渲染后，就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-text —— 向其所在的节点中渲染文本内容。
（与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。)
v-html —— 向指定节点中渲染包含html结构的内容。
（与插值语法的区别：v-html会替换掉节点中所有的内容，{{xx}}则不会。且v-html可以识别html结构。）

v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak指令（没有值）—— 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

使用css的内容不显示配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-pre —— 跳过其所在节点的编译过程。可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令：

定义语法：

局部指令：

new Vue({
	directives:{
		//配置对象
		指令名:{
			bind(element, binding){},
			inserted(element, binding){},
			update(element, binding){},
		}
	} 
})

new Vue({
	directives:{
		//回调函数
		指令名(){}
	}
})

全局指令：

Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

配置对象中常用的3个回调：

bind：指令与元素成功绑定时调用。
inserted：指令所在元素被插入页面时调用。
update：指令所在模板结构被重新解析时调用。

注：

指令定义时不加v-，但使用时要加v-；
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<body>
    <!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 -->
    <div id="root">
        <h2>放大后的n的值: <span v-big="n"></span> {{n}} </h2>
        <input type="text" v-f-Bind:value="n"> <br><br>
        <button @click="n++">n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n : 4,
        },
        directives:{
            //big函数何时会被调用？
            //  1.指令与元素成功绑定时（一上来）。
            //  2.指令所在的模板被重新解析时。
            big(element, binding){
                console.log('指令被调用')
                element.innerText = binding.value * 10
            },
            'f-bind':{
                //指令与元素成功绑定时（一上来）调用
                bind(element, binding){
                    element.value = binding.value
                },
                //指令所在元素被插入页面时调用
                inserted(element, binding){
                    element.focus()
                },
                //指令所在的模板被重新解析时调用
                update(element, binding){
                    element.value = binding.value
                },
            }
        }
    })
</script>

nextTick

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

如：

method: {
	medo(){
		...
		this.$nextTick(function(){
			this.$refs.xxx.focus()
		})
	}
}

Vue实例生命周期

生命周期，又叫生命周期回调函数、生命周期函数、生命周期钩子。

本质：是Vue在关键时刻调用的一些特殊名称的函数。

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

生命周期

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button @click="opacity = 1">透明度设置为1</button>
        <button @click="stop">点我停止变换</button>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            opacity: 1
        },
        methods: {
            stop() {
                //自己调用销毁方法，一般不会这么做
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
        mounted() {
            console.log('mounted', this)
            this.timer = setInterval(() => {
                console.log('setInterval')
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            clearInterval(this.timer)
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    }) 
</script>

常用事件

@blur —— 是当元素失去焦点时所触发的事件

<input type="text" placeholder="请输入内容" @blur="blur"/>

Vue组件化编程

模块与组件

模块：向外提供特定功能的js程序，作用是便于复用js，简化js编写，提高js运行效率；（因为js文件多而杂）

模块化：应用中的js都以模块来编写；

组件：用来实现局部功能效果的代码合集（html/css/js/图片音频等），作用：便于复用代码，简化项目编码，提高运行效率；（因为界面的功能很复杂）

组件化：应用中的功能以多组件的方式编写；

组件

组件是可复用的 Vue 实例，且带有一个名字。分为：

非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含一个组件，文件后缀为 “.vue” （常用）

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

注：：组件中的data必须为一个函数，不然，这个的组件的一个实例发生改变，其他实例也会发生相同的改变。
data() {
    return {
        name: 'Tom'
    }
}

Vue中使用组件的步骤：

定义组件（创建组件）；
- 使用Vue.extend(options)创建，其中options和new Vue(options) 时传入的options几乎一样，但也有点区别：
  - 不能写el，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  - data必须写成函数，这是为了避免组件被复用时，数据存在引用关系。
注册组件；
- 局部注册：靠new Vue的时候传入components选项
- 全局注册：靠Vue.component(‘组件名’,组件)
使用组件：即编写组件标签

关于组件的命名规范：

一个单词组成：
首字母小写：school
首字母大写：School （推荐）

多个单词组成：
kebab-case命名：my-school
CamelCase命名：MySchool（需要Vue脚手架支持)（推荐）

注：组件中可以使用name配置项该组件在开发者工具中呈现的名字。

定义组件的简写方式：

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

VueComponent

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

只需要写上组件标签，Vue解析时会帮我们创建该组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。 —— 每次调用Vue.extend，返回的都是一个全新的VueComponent。

关于this的指向：

组件配置中——

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

new Vue(options)配置中——

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

一个重要的内置关系：VueComponent.prototype._proto_ === Vue.prototype

这个关系让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

非单文件组件

<body>
    <div id="root">
        <!-- 第三步：编写组件标签 -->
        <hello></hello>
        <hr>
        <school></school>
    </div>
</body>
<script>
    //第一步：创建student组件
    const student = Vue.extend({
        template: `
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
        data() {
            return {
                studentName: 'zzc',
                age: 18
            }
        }
    })
    //第一步：创建school组件
    const school = Vue.extend({
        template: `
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
                    <hr>
                    <student></student>
                    <hr>
                    <student_1></student_1>
				</div>
			`,
        //组件嵌套
        components: {
            student,
            student_1: student
        },
        data() {
            return {
                schoolName: 'zzc',
                address: '广东广州',
            }
        },
        methods: {
            showName() {
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建hello组件
    const hello = Vue.extend({
        template: `
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
        data() {
            return {
                name: 'Tom'
            }
        }
    })

    //第二步：全局注册组件
    Vue.component('hello', hello)

    new Vue({
        el: '#root',
        //第二步：注册组件（局部注册）
        components: {
            school,
        },
        data: {
            msg: 'Vue'
        }
    })
</script>

单文件组件

一般将不同的页面功能写成多个 .vue文件，由一个App.vue 进行汇总，然后让 main.js 引入 App.vue；

组件结构快捷模板：输入 <v 按回车即可。

代码格式：

App.vue文件：

<template>
  <!-- 页面结构，即html代码 -->
  <div>
      <School></School>
      <Student></Student>
  </div>
</template>

<script>
//交互功能，即js代码
import School from './School.vue'
import Student from './Student.vue'

export default {
    name: 'App',
    components:{
        School,
        Student
    }
}
</script>

<style>
/* 样式功能，即css代码 */
</style>

main.js：

import App from './App.vue'

new Vue({
    el: '#root',
    components:{
        App
    }
})

使用Vue脚手架

Vue脚手架（Vue CLI，command line interface）是 Vue官方提供的标准化开发工具（开发平台）

初始化脚手架

初始化步骤 ——————

仅第一次执行时，全局安装@vue/cli，在命令行窗口输入 “npm install -g @vue/cli”
切换到要创建项目的目录，输入命令 “vue create 项目名”
进入到项目中，启动项目 “npm run serve”

如出现下载缓慢可以配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

目录结构 ——————

node_modules
public
- index.html 主页面
src
- assets 存放静态资源
- components 存放组件
- App.vue 用于汇总所有组件
- main.js 入口文件
.gitignore git版本管理忽略配置
**babel.config.js ** babel的配置文件
package.json 应用包配置文件
README.md 应用描述文件
package-lock.json 包版本控制文件

render函数 ——————

在main.js中用到了render函数，作用是将App组件放入容器，因为在main.js中引入了精简的vue，其中不包含vue的模板解析器，所以render的作用就是代替模板解析器，节省掉这部分代码。

vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

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

render: h => h(App),
//上面是简写
render(h){
	return h(App),
}

vue.config.js 配置文件 ——————

使用命令 vue inspect > output.js 可以将Vue脚手架的默认配置输出到output.js文件中查看；
使用vue.config.js 配置文件可以对脚手架进行个性化定制，详情见配置参考 | Vue CLI

如：

module.exports = {
    pages:{
        index: {
            //入口文件
            entry: 'src/main.js',
        },
    },
  	lintOnSave: false //关闭语法检查
}

ref与props

ref属性：

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
2. 获取：this.$refs.xxx

props配置项：

功能：让组件接收外部传过来的数据，父组件==>子组件
传递数据：<组件名 name="xxx"/>
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
```
备注：props是只读的，Vue底层会监测对props的修改，如果进行了修改，就会发出警告；
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

（props的内容会比data先准备好）
```
//data中的'myName'的值是 props中的'name', 使用'name'不能修改，而'myName'就可以进行修改
data(){
	return{
		myName: this.name
	}
}
props:['name','age']
```

混入mixin

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

使用方式：

第一步定义混合：定义 .js文件，写下混入的内容

export const mixin1 = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
}
export const mixin2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }
}

第二步使用混入：

全局混入：Vue.mixin(xxx) ，在main.js中引入，全局有效
局部混入：mixins:['xxx'] ，在组件中各自引入

<script>
    //局部引入
    import {mixin1} from "../mixin"

    export default {
      name: "MySchool",
   	  //配置项mixins: 配置多个混入
      mixins: [mixin1]
    };
</script>

//在main.js中 全局引入及配置
import {mixin1} from "./mixin"
Vue.mixin(mixin1)

插件

功能：用于增强Vue

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

定义插件：

//创建一个plugins.js文件，定义插件
对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

//只有一个对象
export default{
    install(Vue){
        Vue.directive(....)
        Vue.mixin(....)
        ....
    }
}

使用插件：

import plugins from './plugins'
Vue.use(plugins)

Vue.use()

scoped样式

作用：让样式在局部生效，防止冲突。
写法：<style scoped>

Todo-list案例

浏览器本地存储

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
4. JSON.parse(null)的结果依然是null。

组件自定义事件

自定义事件可用于组件间通信：子组件 ===> 父组件

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

绑定自定义事件：
1. 第一种方式，在父组件中：<子组件名 @自定义事件名="父组件回调函数"/>或 <Demo v-on:自定义事件名="父组件回调函数"/>
2. 第二种方式，在父组件中：
```
<子组件名 ref="xxx"/>
......
mounted(){
   this.$refs.xxx.$on('自定义事件名',this.父组件回调函数)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('自定义事件名',数据)
解绑自定义事件this.$off('自定义事件名')

解绑多个则参数写成数组形式，解绑全部则不写参数
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('自定义事件',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线

一种组件间通信的方式，适用于任意组件间通信，一般用于没有直接联系的组件之间。

安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
})

使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
  方法名(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.方法名)
}
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods(){
  方法名(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.方法名) //订阅消息，接受到的数据中第一个参数是消息名，从第二个参数开始才是传过来的数据
}
```
4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

过度与动画

Vue实现：

。。。。

第三方动画使用，如 Animate.css - 第三方动画；

Vue中的ajax/跨域

下载axios：
```
npm i axios
```
引入：
```
import axios from 'axios'
```
使用

跨域问题：

在vue.config.js

方式一：
module.experts={
	devServer:{
		proxy: 'http://localhost:80' //获取数据的地址
	}
}
优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

前端请求的地址端口要改成 8080 （与自己页面的端口一致）

方式二：
module.experts={
	proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
          target: 'http://localhost:80',// 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
          target: 'http://localhost:5001',// 代理目标的基础路径
          changeOrigin: true,
          pathRewrite: {'^/api2': ''}
      }
    }
}
优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

vuex

vuex是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

使用场景：多个组件需要共享数据时

安装：num i vuex@3（vue2中只能用vuex3版本，vue3用vuex4版本）

搭建环境

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

//引入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
})

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

......
//引入store
import store from './store'
......

//创建vm,使用store配置项
new Vue({
	el:'#app',
	render: h => h(App),
	store,
})

使用：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

export default new Vuex.Store({
	actions,
	mutations,
	state,
})

组件中读取vuex中的数据：[this.]$store.state.数据名

组件中修改vuex中的数据：this.$store.dispatch('action中的方法名',数据)或 this.this.$store.commit('mutations中的方法名',数据)

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

getters

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

在store.js中追加getters配置

......

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})

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

四个map方法

先导入map方法：

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

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

… 三个点是es6中的拓展运算符

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

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

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

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

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

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

模块化+命名空间

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

修改store.js

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

也可以将将模块分成多个 js 文件，再在 index.js导入使用

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

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

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

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

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

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

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

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

vue-router

概念：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
前端路由：key是路径，value是组件。

注：

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

使用

安装vue-router，命令：npm i vue-router@3

新建router/index.js，配置路由信息：

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
            //嵌套/多级路由
            children:[{
                path: 'news',
                component: News
            }],
		}
	]
})

//暴露router
export default router

在main.js中引入：

import VueRouter from 'vue-router'
import router from './router'

Vue.use(VueRouter)

new Vue({
  el: '#app',
  render: h => h(App),
  router: router
})

在组件中使用：

实现切换：
```
<router-link class="xxx" active-class="active" to="/about(即路由配置中的path)">About</router-link>
<router-link class="xxx" active-class="active" to="/home/news">About</router-link>
```
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。
路由跳转时候默认为push，如果要换成replace，则在 <router-link>中加上replace属性，即 <router-link replace>。

指定展示位置：
```
<router-view></router-view>
```

给路由命名：

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

如何使用

给路由命名，使用 name属性给路由起名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                     name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

传参

query 传参：

传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

接收参数：
```
$route.query.id
$route.query.title
```

params传参：

配置路由，

声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

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

接收参数：
```
$route.params.id
$route.params.title
```

路由的props配置：

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

写在路由配置中

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

编程式路由导航

作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活
（<router-link>最终呈现在页面上其实是<a>标签）

具体编码：

可以写在方法之类的地方，实现其他标签进行路由跳转功能。

//$router的API,对象信息的格式和params传参格式一样
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

组件生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

如：组件激活时开启定时器，失活时清除定时器

<script>
	export default {
		name:'News',
		data() {
			return {
				opacity:1
			}
		},
		/* beforeDestroy() {
			console.log('News组件即将被销毁了')
			clearInterval(this.timer)
		}, */
		/* mounted(){
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		}, */
		activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},
	}
</script>

路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫:

路由信息中的 meta 可以任意写上一些键值对，如 meta : { isAuth : true }

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫:（直接写在路由信息里，且独显守卫只有前置，没有后置）

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫：

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

路由的工作模式

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

//写在路由文件的index.js中
mode: 'history'

打包

npm run build

执行命令后会出现dist文件，即打包后的文件内容。

Vue UI组件库

安装：

npm i element-ui

全局引入：

import Vue from 'vue';
import App from './App.vue';
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

//应用ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入：

安装babel-plugin-component
```
npm install babel-plugin-component -D
```

修改 babel.config.js 文件，添加内容：

module.exports = {
  presets: [
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

按需引入：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue3

工程结构变更：

// 引入的不再是Vue的构造函数, 而是引入一个叫createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例"app"并挂载, 类似于Vue2中的vm, 但app比vm更"轻"
const app = createApp(App)
app.mount('#app')

<template>
  <!-- Vue3中的模板结构可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

Composition API

即组合式API。

在传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。
在新的Composition API 中，我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在setup中。

setup

在vue2中，数据写在data中，方法写在methods中，而在vue3中，数据、方法等等均写在setup中。 setup是所有composition API 的基础。

setup的值为一个函数，它的返回值有两种：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。

<template>
  <h1>我是App组件, setup</h1>
  <h2>姓名: {{ myname }}</h2>
  <h2>年龄: {{ age }}</h2>
  <button @click="sayHello">打招呼</button>
</template>

<script>
    export default {
        name: 'App',
        setup: function () {
            let name = "Tom"
            let age = 18

            function sayHello() {
                alert(`我叫${name}, 今年${age}岁了, 你好`)
            }

            return {
                myname: name,
                age,
                sayHello
            }
        }
    }
</script>

若返回一个渲染函数：则可以自定义渲染内容。

<template>
  <h1>我是App组件, setup</h1>
</template>

<script>
    export default {
        name: 'App',
        setup: function () {
            // let name = "Tom"
            // let age = 18

            // function sayHello() {
            //   alert(`我叫${name}, 今年${age}岁了, 你好`)
            // }

            return ()=>{return h('h1', 'zzc')}
        }
    }
</script>

注意点：

尽量不要与Vue2.x配置混用
- Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
- 如果有重名, setup优先。

setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合，如：

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
</script>

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>稍等，加载中...</h3>
			</template>
		</Suspense>
	</div>
</template>

<script>
	// import Child from './components/Child'//静态引入
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
</script>

ref函数

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

<template>
  <h1>我是App组件, setup</h1>

  <h2>word: {{ word }}</h2>
  <h2>工作类型: {{ job.type }}</h2>
  <h2>薪水: {{ job.salary }}</h2>
  <button @click="changeInfo">点击修改工作</button>

</template>

<script>
import {ref} from 'vue'

export default {
  name: 'App',
    
  setup: function () {
    let word = ref("had")
    let job = ref({
      type: '前端工程师',
      salary: '30k',
    })

    function changeInfo(){
      word.value = "changed",
      job.value.type = '后端工程师',
      job.value.salary = '40k'
    }

    return {
      word,
      job,
      changeInfo
    }
  }
}
</script>

reactive函数

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

<template>
  <h1>我是App组件, setup</h1>

  <h2>工作类型: {{ job.type }}</h2>
  <h2>薪水: {{ job.salary }}</h2>
  <button @click="changeInfo">点击修改工作</button>

</template>

<script>
import {reactive} from 'vue'

export default {
  name: 'App',
    
  setup: function () {
    let job = reactive({
      type: '前端工程师',
      salary: '30k',
    })

    function changeInfo(){
      job.type = '后端工程师',
      job.salary = '40k'
    }

    return {
      job,
      changeInfo
    }
  }
}
</script>

Vue3.0中的响应式原理

vue2.x的响应式

实现原理：
- 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。
- 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
```
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
```
存在问题：
- 新增属性、删除属性，界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
- 解决：需要用this. $se t ， t hi s .$ delete，Vue.set，Vue.delete

Vue3.0的响应式

实现原理:

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

MDN文档中描述的Proxy与Reflect：

Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

const p = new Proxy(person, {
    // 参数target指的是源对象, propName是拦截到的属性名
	// 拦截读取属性值
    get(target,propName){
        console.log(`有人读取了p身上的${propName}属性`)
        return Reflect.get(target,propName)
    },
    // 拦截设置属性值或添加新属性
    set(target,propName,value){
        console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
        Reflect.set(target,propName,value)
    },
    // 拦截删除属性
    deleteProperty(target,propName){
        console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
        return Reflect.deleteProperty(target,propName)
    }
})

p.name = 'tom'

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中是不能用 this 的。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
  - slots: 收到的插槽内容, 相当于 this.$slots。
  - emit: 分发自定义事件的函数, 相当于 this.$emit。

<!-- 组件"Demo" -->
<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>
	<button @click="test">测试触发一下Demo组件的Hello事件</button>
    <slot name='b2'></slot>
	<slot name="a1"></slot>
</template>

<script>
	import {reactive} from 'vue'
	export default {
		name: 'Demo',
		props:['msg','school'],	 // 接收调用者传递的参数
		emits:['hello'],
		setup(props,context){
			console.log('---setup.props---',props)
			console.log('---setup.context---',context)
			console.log('---setup.context.attrs---',context.attrs) //相当与Vue2中的$attrs
			console.log('---setup.context.emit---',context.emit) //触发自定义事件的。
			console.log('---setup.slots---',context.slots) //插槽
			//数据
			let person = reactive({
				name:'张三',
				age:18
			})

			//方法
			function test(){
				context.emit('hello',666)
			}

			//返回一个对象（常用）
			return {
				person,
				test
			}
		}
	}
</script>

<template>
	<Demo @hello="showHelloMsg" msg="你好啊" school="某个学校">
		<template v-slot:a1>
			<br><span>测试块a1</span><br>
		</template>
		<template v-slot:b2>
			<br><span>测试块b2</span>
		</template>
	</Demo>
</template>

<script>
	import Demo from './components/Demo'
	export default {
		name: 'App',
		components:{Demo},
		setup(){
			function showHelloMsg(value){
				alert(`你好啊，你触发了hello事件，我收到的参数是:${value}！`)
			}
			return {
				showHelloMsg
			}
		}
	}
</script>

计算属性与监视

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定义的响应式数据中某个属性时，不能用 “对象名.属性名”，而要用箭头函数返回属性，如 ()=>person.age

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取，且会强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

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

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

/* 情况三：监视reactive定义的响应式数据
		1. 无法正确获得oldValue！！
		2. 会强制开启了深度监视 
*/
watch(person, (newValue,oldValue)=>{
	console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

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

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

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

watchEffect函数

watch的使用：既要指明监视的属性，也要指明监视的回调。
watchEffect的使用：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

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

生命周期

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

自定义hook函数

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

例子：

将复用的代码封装成hook函数，这里是获取鼠标坐标的功能，放入hooks/usePoint.js（放hook函数的文件一个命名为useXxxx）：

import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
	//实现鼠标“打点”相关的数据
	let point = reactive({
		x:0,
		y:0
	})

	//实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	//实现鼠标“打点”相关的生命周期钩子
	onMounted(()=>{
		window.addEventListener('click',savePoint)
	})

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})

	return point
}

引用：

<template>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let point = usePoint()
			
			return {
                sum,
                point
            }
		}
	}
</script>

工具

响应式数据的判断

isRef: 检查一个值是否为一个 ref 对象

let foo: unknown
if (isRef(foo)) {
  // foo 的类型被收窄为了 Ref<unknown>
  foo.value
}

isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

toRef

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)（返回对象时前面加 “…” 可展开对象的属性）

<template>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRef,toRefs} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			// const name2 = toRef(person,'name')
			// console.log('####',name2)

			// const x = toRefs(person)
			// console.log('******',x)

			return {
				person,
				// name:toRef(person,'name'),
				// age:toRef(person,'age'),
				// salary:toRef(person.job.j1,'salary'),
				...toRefs(person)
			}
		}
	}
</script>

unref

如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x)
  // unwrapped 现在保证为 number 类型
}

其它 Composition API

shallowReactive 与 shallowRef

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

<template>
	<h4>当前的x.y值是：{{x.y}}</h4>
	<button @click="x={y:888}">点我替换x</button>
	<button @click="x.y++">点我x.y++</button>
	<hr>
	<h4>{{person}}</h4>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRef,toRefs,shallowReactive,shallowRef} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let person = shallowReactive({ //只考虑第一层数据的响应式
			//let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20	// 深层次的属性,不做响应式处理
					}
				}
			})
			let x = shallowRef({
				y:0
			})
			console.log('******',x)

			return {
				x,
				person,
				...toRefs(person)
			}
		}
	}
</script>

readonly 与 shallowReadonly

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

<template>
	<h4>当前求和为：{{sum}}</h4>
	<button @click="sum++">点我++</button>
	<hr>
	<h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>
	<h2>薪资：{{job.j1.salary}}K</h2>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
	import {ref,reactive,toRefs,readonly,shallowReadonly} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

			person = readonly(person)
			// person = shallowReadonly(person)	//深层的数据仍可改
			// sum = readonly(sum)	// 基本类型没有层次, 两者使用都一样
			// sum = shallowReadonly(sum)

			return {
				sum,
				...toRefs(person)
			}
		}
	}
</script>

toRaw 与 markRaw

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

<template>
	<h3 v-show="person.car">座驾信息：{{person.car}}</h3>
	<button @click="showRawPerson">输出最原始的person</button>
	<button @click="addCar">给人添加一台车</button>
	<button @click="person.car.name+='!'">换车名</button>
	<button @click="changePrice">换价格</button>
</template>

<script>
	import {ref,reactive,toRefs,toRaw,markRaw} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			//数据
			let sum = ref(0)
			let person = reactive({
				name:'张三',
				age:18
			})

			function showRawPerson(){
				const p = toRaw(person)	
				p.age++		// p被转为普通对象,属性变化不会反映到页面上
				console.log(p)
			}

			function addCar(){
				let car = {name:'奔驰',price:40}
				person.car = markRaw(car)	// car对象被标为非响应对象
			}

			function changePrice(){
				person.car.price++	// car不是响应对象,内容虽然变了,但不会反映到页面上 
				console.log(person.car.price)
			}

			return {
				sum,
				person,	// toRefs(person)产生的多个的对象没有后来添加的car对象, 所以把person对象交出去, 才能访问person中的car
				...toRefs(person),		
				showRawPerson,
				addCar,
				changePrice
			}
		}
	}
</script>

customRef

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

实现防抖效果：

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue' 
	export default {
		name:'Demo', 
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef 
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue追踪该值的变化
							return value
						},
						set(newValue){
							clearTimeout(timer)	// 清除并只保持一个定时器,可以防抖(避免积压很多定时器去解析模板)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去重新解析模板, 即更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

provide 与 inject

作用：实现祖先与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

具体写法：

祖组件中：

setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

后代组件中：

setup(props,context){
	......
    const car = inject('car')
    return {car}
	......
}

新的组件

Fragment

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

Teleport

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

<teleport to="body">  <!-- 这里的to属性可写html标签或选择器id -->	
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

异步引入组件

// import Child from './components/Child'  //静态引入
import {defineAsyncComponent} from 'vue' 
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入

使用Suspense包裹组件，并配置好default与 fallback

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
            <!-- 正常展示的内容 -->
			<template v-slot:default>
				<Child/>
			</template>
			<!-- 加载很慢时先暂时展示的内容 -->
			<template v-slot:fallback>
				<h3>加载中.....</h3>
			</template>
		</Suspense>
	</div>
</template>

其他

全局API的转移

Vue 2.x 有许多全局 API 和配置。

例如：注册全局组件、注册全局指令等。

//注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

Vue3.0中对这些API做出了调整：

将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（`Vue`）	3.x 实例 API (`app`)
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

其他改变

data选项应始终被声明为一个函数。

过度类名的更改：

Vue2.x写法

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3.x写法

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

移除v-on.native修饰符

父组件中绑定事件

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

子组件中声明自定义事件

<script>
  export default {
    emits: ['close']
  }
</script>

移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

ValcanoZz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2&Vue3学习

Vue是一套前端框架，旨在免除原生JavaScripte中的DOM操作，简化书写。
复制链接

扫一扫

专栏目录