Vue2+Vue3快速上手

古惑异
215 阅读29分钟

Vue官网

此篇文章适合复习vue使用

Vue2

1. vue介绍

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。 Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

2.Vue使用

首先我们在项目中引入vue.js,引入js文件的方法有很多，使用文件都可以 项目结构

2.1 模板语法

  • 插值语法:用于解析标签体内容

    写法：{{xxx}} xxx是js表达式，可以直接读取到data中的所有属性

<div id="app">
    <h1>{{name}}</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name:"ghy"
        },
        methods: {
        }
    })
</script>

  • 指令语法：用于解析标签

    举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性

<!--这里使用了指令语法-->
<a :href="href">百度一下</a>
<script>
    new Vue({
        el: '#app',
        data: {
            name:"ghy",
            href:"https://www.baidu.com"
        },
        methods: {
        }
    })
</script>

2.2 数据绑定

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

  • 单向绑定(v-bind)：数据只能从data流向页面，页面不能影响到数据
  • 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data，

tips 1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<div id="root">
	<!-- 单向数据绑定 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    
    <!-- 简写 v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值-->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
</div>
<script>
    new Vue({
		el:'#root',
		data:{
			name:'jack',
        }
	})
</script>

2.3 data的2种写法

  • 对象式
  • 函数式

tips:在组件中，data必须使用函数式写法

<script>
    new Vue({
		el:'#root',
        //对象式
		data:{
			name:'jack',
        }
        
        //函数式
        data() {
        	return {
                name: 'jack'
            }
    	}
	})
</script>

2.4 Vue中的MVVM

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

2.5 事件处理

  • 使用v-on:xxx 或 @xxx,其中xxx是事件名
  • 事件的回调函数都配置在methods对象中,methods中配置的函数，都是被Vue所管理的函数
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button @click="showInfo1">点我提示信息1（不传参）</button>
        <!-- 如果你想一起传入点击事件和参数，那么点击事件需要使用$event传入，如果只需要传入参数那么可以不用理会点击事件 -->
        <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
        
  methods: {
            // 如果调用方法时没有传入任何参数，vue会自动传 点击事件event 给函数
            showInfo1(event) {
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！')
            },
            showInfo2(event, number) {
                console.log(event, number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
Vue中的事件修饰符
  • prevent：阻止默认事件（常用）
  • stop：阻止事件冒泡（常用）
  • once：事件只触发一次（常用）

<div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用） a标签默认点击跳转链接 prevent阻止了这个行为 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡（常用） 是多层结构并且都设置了点击事件 当你点击里面一层 点击事件会从里到外触发回调函数 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
        </div>
        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
 </div>

2.6 键盘事件

键盘事件语法糖：@keydown，@keyup Vue中常用的按键别名：

  • 回车 => enter
  • 删除 => delete
  • 退出 => esc
  • 空格 => space
  • 换行 => tab (特殊，必须配合keydown去使用)

tips 在vue3中已经移除了使用keycode的方式

<!-- 准备好一个容器-->
<div id="root">
    <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>

2.8 计算属性

  • 定义：要用的属性不存在，要通过已有属性计算得来,在使用时直接写名字，它不是个方法

  • get函数什么时候执行？

    • (1).初次读取时会执行一次
    • (2).当依赖的数据发生改变时会被再次调用

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

  • 备注：

    • 计算属性最终会出现在vm上，直接读取使用即可，可以直接使用不用写this
    • 计算属性一般不会修改，如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

computed的简洁写法，这种写法没有set方法 只有get方法

 fullName() {
    console.log('get被调用了')
    return this.firstName + '-' + this.lastName
  }

computed的完整写法

<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName"> 
    全名：<span>{{fullName}}</span>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        }
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                },
                //set什么时候调用? 当fullName被修改时。
                // 可以主动在控制台修改fullName来查看情况
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
</script>

2.9 监视属性

监视属性watch：

  • 当被监视的属性变化时, 回调函数自动调用, 进行相关操作

  • 监视的属性必须存在，才能进行监视

  • 深度监视

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

备注：

(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(2).使用watch时根据数据的具体结构，决定是否采用深度监视

简洁写法 在不需要immediate，deep时可以使用

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

完整写法

watch:{
            isHot:{
                immediate: true, // 初始化时让handler调用一下
                deep:true,  //开启深度监视,当监听对象对象里面的元素改变也可以监听到
                // handler什么时候调用？当isHot发生改变时。这个方法不能改
                handler(newValue, oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
      }

2.10 样式绑定

class样式

写法：:class=“xxx” xxx可以是字符串、对象、数。

所以分为三种写法，字符串写法，数组写法，对象写法

字符串写法


<style>
	.normal{
        background-color: skyblue;
    }
</style>

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    
    data:{
            mood:'normal'
        }

数组写法:数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
    .atguigu3{
        border-radius: 20px;
    }
</style>
<div class="basic" :class="classArr"></div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classArr: ['atguigu1','atguigu2','atguigu3']
        }
    })
</script>

对象写法 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
</style>
 <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
	<div class="basic" :class="classObj">{{name}}</div>
        
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classObj:{
                atguigu1:false,
                atguigu2:false,
			}
        }
    })
</script>
style样式

有两种写法，对象写法，数组写法

对象写法

 <!-- 绑定style样式--对象写法 -->
	<div class="basic" :style="styleObj"></div>
        
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleObj:{
                fontSize: '40px',
                color:'red',
			}
        }
    })
</script>

数组写法

 <!-- 绑定style样式--数组写法 -->
	<div class="basic" :style="styleArr">{{name}}</div>
        
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]
        }
    })
</script>

2.11 条件渲染

v-if
  • 写法： (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式”
  • 适用于：切换频率较低的场景
  • 特点：不展示的DOM元素直接被移除
  • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
 <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>
 </div>
v-show
  • 写法：v-show=“表达式”
  • 适用于：切换频率较高的场景
  • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none)

tips：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到 v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素

2.12 列表渲染

v-for
  • 用于展示列表数据
  • 语法：v-for=“(item, index) in xxx” :key=“yyy” item表示当前对象元素，idnex表示当前元素索引
  • 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
 <ul>
    <li v-for="(item,index) of persons" :key="index">
        {{item.name}}-{{item.age}}
    </li>
</ul>
key的原理

点此链接 尽量使用item.id作为key

2.13 vue监测data中的数据

<body>
    <div id="app">
        <li v-for="(item, index) in person" :key="index">{{ item.name }}---{{ item.age }}</li>
        <button @click="changeInfo">改变信息</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                person: [
                    { name: "lcy", age: 90 },
                    { name: "xiaoming", age: 1 },
                    { name: "yyx", age: 11 },
                ]
            },
            methods: {
                changeInfo() {
                  this.person[0]={name:"lcy",age:100}
                    console.log(this.person);
                }
            }
        })
    </script>
</body>

输出结果 可以看到当我点击按钮时，控制台输出的是改变了的数据，但是页面却没有更新 想了解原理的可以看看这篇文章 vue监听数组原理

这里直接给出解决方法：

在methods方法中操作数组需要用到以下方法

2.14 收集表单数据

主要通过v-model绑定表单控件的value值

  • checkbox：当v-model提供的数据是一个元素(非数组),此时与其绑定的就是checked，是一个布尔值。当提供的元素是一个数组时那么就是收集这些组件的value值并组成数组

v-model的三个修饰符：

lazy：失去焦点再收集数据，

number：输入字符串转为有效的数字

trim：输入首尾空格过滤


<body>
    <div id="app">
        <form @submit.prevent="submitInfo">
            账号：<input type="text" v-model.trim="student.account"><br />
            密码：<input type="password" v-model="student.pwd"><br />
            年龄：<input type="number" v-model.number="student.age"><br />
            性别：男<input type="radio" name="sex" value="男" v-model="student.sex">
            女<input type="radio" name="sex" value="女" v-model="student.sex">
            <br />
            爱好：学习<input type="checkbox" name="hobby" value="学习" v-model="student.hobby">
            打游戏<input type="checkbox" name="hobby" value="打游戏" v-model="student.hobby">
            吃饭<input type="checkbox" name="hobby" value="吃饭" v-model="student.hobby">
            <br />
            所属校区：<select v-model="student.school">
                <option value="武汉">武汉</option>
                <option value="长沙">长沙</option>
                <option value="北京">北京</option>
            </select>
            <br />
            其他信息：<textarea v-model.lazy="student.other"></textarea><br />
            <input type="checkbox" v-model="student.isRead"> 接受用户协议<br />
            <button>提交</button>
        </form>

    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                student: {
                    account: "",
                    pwd: "",
                    age: 0,
                    sex: "",
                    hobby: [],
                    school: "",
                    other: "",
                    isRead: false
                }

            },
            methods: {
                submitInfo() {
                    alert(JSON.stringify(this.student));
                }

            }
        })
    </script>
</body>

2.15 内置指令

这一部分内容用的很少，有一部分就没讲

v-text指令

1.作用：向其所在的节点中渲染文本内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

  • v-html会替换掉节点中所有的内容，{{xx}}则不会。
  • v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

  • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
  • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

2.16 生命周期

  1. beforeCreate（创建前） ：数据监测(getter和setter)和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
  2. created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el属性。
  3. beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。此阶段Vue开始解析模板，生成虚拟DOM存在内存中，还没有把虚拟DOM转换成真实DOM，插入页面中。所以网页不能显示解析好的内容。
  4. mounted（挂载后） ：在el被新创建的 vm.$el（就是真实DOM的拷贝）替换，并挂载到实例上去之后调用（将内存中的虚拟DOM转为真实DOM，真实DOM插入页面）。此时页面中呈现的是经过Vue编译的DOM，这时在这个钩子函数中对DOM的操作可以有效，但要尽量避免。一般在这个阶段进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等等
  5. beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染（数据是新的，但页面是旧的，页面和数据没保持同步呢）。
  6. updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  7. beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。在这个阶段一般进行关闭定时器，取消订阅消息，解绑自定义事件。
  8. destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

vue2生命周期

2.17 单文件组件

单文件组件就是将一个组件的代码写在 .vue 这种格式的文件中，webpack 会将 .vue 文件解析成 html,css,js这些形式。单文件组件的data必须是函数式的写法

name:为注册组件名

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>
<script>
	 export default {
		name:'Student',
		data(){
                    return {
                            name:'张三',
                            age:18
                    }
		}
	}
</script>

3.vue脚手架部分等复杂内容

使用前置：

第一步(没有安装过的执行)：全局安装 @vue/cli

npm install -g @vue/cli

第二步：切换到要创建项目的目录，然后使用命令创建项目

vue create xxxxx

第三步：启动项目

npm run serve

3.1 脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
demo展示

组件结构

结构

App.vue image.png

index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<!-- 引入第三方样式 -->
	<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
	<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
		<!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.2 vue零碎的一些知识

ref属性

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

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

  • 使用方式：

    • 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
    • 获取：this.$refs.xxx
<Student ref="student"/>
<h1 ref="mh1"></h1>

export default {
  name: 'App',
  components: {
    Student,
    School
  },
  mounted() {
    console.log(this.$refs.mh1)
    console.log(this.$refs.student)
  }
}
props配置项

  1. 功能：让组件接收外部传过来的数据

  2. 传递数据：<Demo name="xxx"/>

  3. 接收数据：

    1. 第一种方式（只接收）：props:['name']
    2. 第二种方式（限制类型）：props:{name:String}
    3. 第三种方式（限制类型、限制必要性、指定默认值）：

<Student name="lcy" age="18"/>
<!--在age处加上：就可以当作js解析成number-->
<Student name="lcy" :age="18"/>
props:{
	name:{
        type:String, //类型，这里的type不是一种硬性规定，不是String会警告而已，若传入age="18"，组件的age type总是String类型
        required:true, //必要性
        default:'老王' //默认值
	}
}

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

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制。

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

使用插件前需要在main.js中引入
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})
scoped样式
  1. 作用：让样式在只在当前组件生效，防止冲突。默认样式全局生效
  2. 写法：<style scoped>
<style lang="less" scoped>
    .demo{
        background-color: pink;
        .atguigu{
                font-size: 40px;
        }
    }
</style>

3.3浏览器本地存储

Cookie

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用 于控制 Cookie 有效期、安全性、使用范围的可选属性组成。不同域名下的 Cookie 各自独立，每当客户端发起请求时，会自动把当前域名下所有未过期的 Cookie 一同发送到服务器。

Cookie的特性：

  • Cookie一旦创建成功，名称就无法修改
  • Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie
  • 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
  • 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的
  • Cookie在请求一个新的页面的时候都会被发送过去

Cookie 不具有安全性

由于 Cookie 是存储在浏览器中的，而且浏览器也提供了读写 Cookie 的 API，因此 Cookie 很容易被伪造，不具有安全 性。因此不建议服务器将重要的隐私数据，通过 Cookie 的形式发送给浏览器。

Session

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了session是一种特殊的cookie。cookie是保存在客户端的，而session是保存在服务端。

LocalStorage

LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

LocalStorage的优点：

  • 在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息
  • LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
  • 仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

LocalStorage的缺点：

  • 存在浏览器兼容问题，IE8以下版本的浏览器不支持
  • 如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage
  • LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

LocalStorage的常用API

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)

3.4 组件自定义事件

组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件

绑定自定义事件

第一种方式

在父组件中绑定事件：<Demo @incident="test"/>或 <Demo v-on:atguigu="test"/>
子组件调用事件并传入参数：this.$emit('incident',this.name,666,888,900)

父组件：
<!--在父组件中给组件绑定事件getInfo 当子组件触发时调用回调方法getStudentInfo-->
<Student @getInfo="getStudentInfo"/>
getStudentInfo(name, age) {
  console.log(name, age)
}

子组件
<!--子组件出发事件并传入参数-->
<button @click="this.$emit('getInfo', this.name, this.age)">点我send</button>

第二种方式

使用 this.$refs.xxx.$on() 这样写起来更灵活，比如可以加定时器啥的。

子组件触犯方式不变 this.$emit

<Student ref="student"/>
methods: {
            getStudentName(name,...params){
                    console.log('App收到了学生名：',name,params)
                    this.studentName = name
            },
		},
mounted() {
        this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
        // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
}

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

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

解绑自定义事件this.$off('atguigu')

一般在组件销毁之前 就可以解绑自定义事件了

3.5 全局事件总线

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

  2. 安装全局事件总线：

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

3. 使用事件总线：

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

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

2.  提供数据：`this.$bus.$emit('xxxx',数据)`

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

main.js
new Vue({
  render: h => h(App),
  beforeCreate() {
      //安装全局事件总线
   Vue.prototype.$bus=this
  }
}).$mount('#app')



methods: {
  getStudentInfo(name, age) {
    console.log(name, age)
  }
},
mounted() {
    //定义一个全局事件，和回调方法
  this.$bus.$on("getInfo", this.getStudentInfo)
}


methods: {
  sendInfo(){
      //组件触发
    this.$bus.$emit("getInfo",this.name,this.age)
  }
},
beforeDestroy() {
    //在销毁前解绑事件 ，因为这是全局事件总线，所以这是非常有必要的
  this.$bus.$off("getInfo")
}

3.6 消息订阅和发布

  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)去取消订阅

//在main.js中引入插件
import pubsub from 'pubsub-js'
Vue.use(pubsub)


//消息订阅，这里的回调函数可以使用箭头函数
methods:{
  getStudentInfo(msgName,data){
    console.log(msgName,data)
  }
},
mounted() {
  pubsub.subscribe("getInfo",this.getStudentInfo)
}




methods:{
  sendInfo(){
      pubsub.publish("getInfo",{name:this.name,age:this.age})
  }
},
beforeDestroy() {
  pubsub.unsubscribe("getInfo")
}

3.7 vue脚手架配置代理

方法一

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

devServer:{
    //表示前端所有请求都会发送到这个地址
  proxy:"http://localhost:5000"
}

axios.get("http://localhost:8080/api").then(res=>{
  console.log(res.data.msg)
},err=>{
  console.log(err)
})

说明：

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

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

module.exports = {
    devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}//代理服务器将请求地址转给真实服务器时会将 /api1 去掉
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。

3.8 slot插槽

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

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

  3. 使用方式：

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

2. 具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>
            <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（父）组件决定）

3 VUEX

原理图

组件通过dispatch调用actions actions通过commit将数据提交至mutations mutations中的方法直接对数据进行修改

组件读取vuex中的数据：$store.state.sum 组件修改vuex中的数据并传入参数：this.$store.dispatch("addSum",this.num)或者this.$store.commit("ADDSUM",this.num)

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

Actions：主要是执行一些业务逻辑,其中方法的参数都被处理了只有2个参数context和data值 Mutations:主要直接对state数据直接进行修改，其方法名约定全大写 方法参数有state value

3.1 概念

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

3.2 搭建Vuex环境及使用

  1. 安装vuex npm install vuex@3

tips:vuex3版本对应vue2，vuex4版本对应vue3

  1. 创建文件：src/store/index.js
import Vue from "vue";
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {
    addSum(context, data) {
        console.log("actions调用了addSum")
        //context表示上下文，提供了commit方法
        context.commit('ADDSUM', data)
    },
    subSum(context, data) {
        console.log("actions调用了subSum")
        context.commit('SUBNUM', data)
    },
    waitSum(context,data){
        console.log("actions调用了waitSum")
        setTimeout(()=>{
            context.commit("WAITSUM",data)
        },1000)
    }
}

const mutations = {
    ADDSUM(state, data) {
        console.log("mutations调用了ADDSUM")
        //state主要包含了状态属性
        state.sum += data
    },
    SUBNUM(state, data) {
        console.log("mutations调用了SUBNUM")
        state.sum-=data
    },
    WAITSUM(state,data){
        console.log("mutations调用了WAITSUM")
        state.sum += data
    }
}

const state = {
     //定义一个状态
    sum: 0
}

const store = new Vuex.Store({
    actions,
    mutations,
    state
})
export default store;
  1. 在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......

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

组件Count.vue

<template>
    <div>
      {{$store.state.sum}}
      <br>
      <button @click="addSum">+</button>
      <button @click="subSum">-</button>
      <button @click="waitSum">延迟计算加</button>
    </div>
</template>

<script>
export  default {
  name:"Count",
  data(){
    return {
        num:1
    }
  },
  methods:{
    addSum(){
    //由于这个操作没有生命逻辑 所以可以直接绕过actions直接commit
      this.$store.commit("ADDSUM",this.num)
    },
    subSum(){
      this.$store.dispatch("subSum",this.num)
    },
    waitSum(){
      this.$store.dispatch("waitSum",this.num)
    }

  }
}

</script>

<style scoped>

</style>

3.3 getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，与计算属性computed类似
  2. 在store.js中追加getters配置
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

3.4 四个map方法的使用

分别是mapState, mapGetters, mapActions, mapMutations这四个方法使用时都需要import导入

mapState

用于帮助我们映射state中的数据作为计算属性,不能写在methods里

computed:{
  //对象写法：sums表示生成的计算属性名字，字符串sum表示引用的state值
  ...mapState({sums:'sum',school:'school'}),

  //数组写法：表示计算属性名字和引用的state值都叫sum
  ...mapState(['sum','school'])
}
mapGetters方法

用于帮助我们映射getters中的数据为计算属性，写法同mapstate

mapActions方法

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数,写法同mapstate，写在methods中

mapMutations方法

用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数,写法同mapstate，写在methods中

tops：

1.mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则传的参数是事件对象(event)。

2.mapActions和mapMutations使用时若数组无法传参，在点击事件中传递,如@click="handle(100)"

3.5 命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。
  2. 修改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
  }
})
  1. 开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
// 用 mapState 取 countAbout 中的state 必须加上 'countAbout'
...mapState('countAbout',['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

4. 路由

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

4.1 Vue-router基本用法

  1. 安装vue-router，命令：npm i vue-router vue2版本对应vue-router@3
  2. 编写router配置项: 新建文件route/index.js
import VueRouter from "vue-router";
import Studnet from "@/components/Studnet.vue";
import School from "@/components/School.vue";
import Vue from "vue";

Vue.use(VueRouter)

const router=new VueRouter({
    routes:[
        {
            //第一层路由的path一定要加/，注意这里的component不需要加上尖括号
            path:'/info',
            component:Studnet
        },
        {
            path:"/school",
            component:School
        }
    ]

})
export default router;
  1. 引入插件
import route from "@/route";

new Vue({
  render: h => h(App),
  router:route
}).$mount('#app')

4. 实现切换 最终vue-router会将router-link节点转换为a标签

<router-link to="/info">student</router-link>

5. 展示位置

<router-view></router-view>

4.2 几个注意点

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

4.3 多级路由（多级路由）

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

	{
		path:'/info',
		component:School,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]

跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4.4 路由的query参数

传递参数 跳转并携带query参数，to的字符串写法

<router-link to="/info?id=666&name=lcy">student</router-link>

跳转并携带query参数，to的对象写法

<router-link :to="{
  path:'/info',
  query:{
    id:1,
    name:'张三'
  }
}">student</router-link>

接受参数

route.query.idroute.query.id route.query.title

4.5 命名路由

  1. 作用：可以简化路由的跳转。 给路由命名：
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'student'}">跳转</router-link>

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

4.6 路由的params参数

在路由处定义

{
        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配置！

4.7 路由的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,
		  a: 1,
		  b: 'hello'
                  //也可以 ...$route.query
		}
	}
}


export  default {
  name:"Student",
  props:['age','name'],
  mounted() {
    console.log(this.age,this.name)
  }
}

4.8 <router-link>的replace属性

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

4.9 编程式路由导航

因为route-link总是会被渲染程a链接，所以这种方法可以通过方法调用的方式实现跳转

//$router的两个API
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() //可前进也可后退

4.10 缓存路由组件

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

  2. 具体编码：

    这个 include 指的是组件名，不写则表示当前显示区域所有组件都不销魂

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

4.11 两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 具体名字：

  • activated路由组件被激活时触发。
  • deactivated路由组件失活时触发。

这两个生命周期钩子需要配合前面的缓存路由组件使用（没有缓存路由组件不起效果）

4.12 路由守卫

  1. 作用：对路由进行权限控制
  2. 分类：全局守卫、独享守卫、组件内守卫
  3. 全局守卫: 方法参数： to：包含跳转路由的一些消息 from：包含了来自路由的一些消息 next：调用此方法表示允许跳转，不调用就不会跳转

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
           ......
        }
    ]
})

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from);
    if(to.meta.isAuth) {
        if(localStorage.getItem('school') === 'zhejiang') {
            // 放行
            next()
        } else {
            alert('学校名不对，无权查看')
        }
    } else {
        next()
    }
})

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log('后置路由守卫', to, from)
    document.title = to.meta.title || '我的系统'
})

export default router
  1. 独享守卫

直接写在路由里面

path:'/info',
component:Student,
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()
	}
}
  1. 组件内守卫：

在具体组件内写守卫，有点类似生命周期函数

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

4.13 路由元信息（meta）

直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

{
    meta:{
        msg:"你得到了元信息"
    },
    name:'student',
    path:'/info',
    component:Studnet,
    props($route){
        return {
            ...$route.params
        }
    }

},

console.log(this.$route.meta.msg)

4.14 路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。

  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。

  3. hash模式：

    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。

  4. history模式：

    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
{
    mode:'history',
    path:"/school",
    component:School
}

Vue3

相对于vue2的优势

  • 启动速度块
  • 更高效的渲染机制
  • 更简单的组件开发方式
  • 更严格的TypeScript支持
  • 内存占用减少

1. 创建vue3工程

  1. vue-cli：确保@vue/cli版本在4.5.0以上 vue create vue3_test
  2. vite：新一代前端构建工具。开发环境中，无需打包操作，可快速的冷启动。 轻量快速的热重载（HMR）。 真正的按需编译，不再等待整个应用编译完成。

2. 常用 Composition API

2.1. 拉开序幕的setup

  1. 理解：Vue3.0中一个新的配置项，值为一个函数。
  2. setup是所有Composition API（组合API） “ 表演的舞台 ” 。
  3. 组件中所用到的：数据、方法等等，均要配置在setup中。
  4. setup函数的两种返回值：
    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
  5. 注意点：
    1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

2.2. ref函数

定义一个响应式的数据，当这个对象的属性发生变化时，Vue3会自动更新视图中相应的内容。

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

不使用ref函数：

<template>
<div>这是Student内容</div>
  <h1>{{name}}</h1>
  <button @click="name+='~'">点我改变name</button>
</template>

<script>
export default {
  name:'Student',
  setup(){
      let name="lcy"
    return {
        name
    }
  }
}
</script>

image.png

可以看到name值已经改变，但是页面没有更新

使用ref：这样页面页面就可以更新了

let name = ref("lcy")
console.log(name.value)
return {
  name
}

2.3 reactive函数

  • 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）当这个对象的属性发生变化时，Vue3会自动更新视图中相应的内容。
  • 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）,对于数组就没了vue2中的限制
  • reactive定义的响应式数据是“深层次的”，对象中的对象也可以检测到。
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

在方法中就不要加value使用了


function changeC(){
  this.person.a.b.c++;
}

const person = reactive({
  a:{
    b:{
      c:9
    }
  }
  }

2.4 reactive对比ref

  • 从定义数据角度对比：

    • ref用来定义：基本类型数据。
    • reactive用来定义：对象（或数组）类型数据。
    • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。建议使用reactive

  • 从原理角度对比：

    • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
    • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。

  • 从使用角度对比：

    • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
    • reactive定义的数据：操作数据与读取数据：均不需要.value。

2.5 setup的两个注意点

  • setup执行的时机

    • 在beforeCreate之前执行一次，this是undefined。

  • setup的参数

    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

    • context：上下文对象

      • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
      • slots: 收到的插槽内容, 相当于 this.$slots。
      • emit: 分发自定义事件的函数, 相当于 this.$emit。
export default {
  name: 'Student',
  props: ['id'],
  setup(props, context) {
    function prnit(){
      console.log("fdsaf")
      console.log(a,b,c)
    }
    return {
      prnit
    }
  }
  
}

2.7.计算属性与监视

1.computed函数
  • 与Vue2.x中computed配置功能一致
<h1>{{id}}</h1>
<h1>{{computeId}}</h1>

export default {
  name: 'Student',
  props: ['id'],
  setup(props, context) {
    let computeId = computed(()=>{
      return props.id * 10
    })


    let computeIdS = computed({
      get(){
        return props.id * 10
      },
      set(value){
        console.log(value)
      }
    })
    return {
      computeId,computeIdS
    }
  }
}
2.watch函数

  • 与Vue2.x中watch配置功能一致

  • 两个小“坑”：

    • 监视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定义的响应式数据
        若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
        若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
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,deep:true}) 

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

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

  • watch的套路是：既要指明监视的属性，也要指明监视的回调。

  • watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

  • watchEffect有点像computed：

    • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
    • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。
//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

2.8 Vue3对比Vue2的生命周期

  • 两个被更名：

    • 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

2.9 toRef

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

export default {
  name: 'Student',
  setup() {
    let student=reactive(
        {
          name:'张三',
          age:18,
          school:{
            name:'jida'
          }
        }
    )
    return {
    //toRefname是向外部提供使用的名字， toRefname指向stuent中的name属性
      toRefname:toRef(student,'name'),
      toRefage:toRef(student,'age'),
      toRefschoolname:toRef(student.school,'name'),
      //扩展写法
          ...toRefs(student)
    }

  }

}

2.10 provide 与 inject

  • 作用：实现祖与后代组件间通信，实则只要是后代组件都可以用

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

  • 具体写法：

    1. 祖组件中：
 setup(){
	......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}


2.后代组件中

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

2.11 其它 Composition API

这一章算扩展,了解了解

1.shallowReactive 与 shallowRef

  • shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

  • shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

  • 什么时候使用?

    • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
    • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
2.readonly 与 shallowReadonly
  • readonly: 让一个响应式数据变为只读的（深只读）。
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）。
  • 应用场景: 不希望数据被修改时。
3.toRaw 与 markRaw

  • toRaw：

    • 作用：将一个由reactive生成的响应式对象转为普通对象。
    • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

  • markRaw：

    • 作用：标记一个对象，使其永远不会再成为响应式对象。

    • 应用场景:

      1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
      2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
4.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这个value值是需要被“追踪”的
                            return value
                        },
                        set(newValue){
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //告诉Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
                keyword
            }
        }
    }
</script>

2.12.响应式数据的判断

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

3. 新的组件

这一篇只做介绍

1.Fragment

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

这个相当于vue3的特点，不用我们实现

2.Teleport

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

3. Suspense

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

4. 其他

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

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

    2.x 全局 API（Vue）3.x 实例 API (app)
    Vue.config.xxxxapp.config.xxxx
    Vue.config.productionTip移除
    Vue.componentapp.component
    Vue.directiveapp.directive
    Vue.mixinapp.mixin
    Vue.useapp.use
    Vue.prototypeapp.config.globalProperties

  2. 其他改变

  • 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” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

setup语法塘 持续更新中

avatar
文章
阅读
粉丝