Vue学习--知识点总结
001_课程介绍
学习线路：前端小白-->Vue2-->Vue3
002_vue介绍
Vue 是一套用于构建用户界面的渐进式JavaScript框架。
Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
作者: 尤雨溪
Vue 的特点
1. 遵循MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注UI, 也可以引入其它第三方库开发项目
与其它JS 框架的关联
1. 借鉴Angular 的模板和数据绑定技术
2. 借鉴React 的组件化和虚拟DOM 技术
Vue 周边库
1. vue-cli: vue 脚手架
2. vue-resource
3. axios
4. vue-router: 路由
5. vuex: 状态管理
6. element-ui: 基于vue 的UI 组件库(PC 端)
……
003_Vue官网使用指南
Vue2官方网站：https://v2.cn.vuejs.org/
004_Vue技术_搭建Vue开发环境
1. 在浏览器中安装 Vue Devtools 工具。
2. 在页面文件中直接用 <script> 引入，或使用CDN引入。
005_Vue技术_Hello小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
-->
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script type="text/javascript" >
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建Vue实例
new Vue({
el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'atguigu',
address:'北京'
}
})
</script>
</body>
</html>
006_Vue技术_分析Hello案例
<!--
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
-->
007_Vue技术_模板语法
<!--
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
-->
008_Vue技术_数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数据绑定</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中有2种数据绑定的方式：
1.单向绑定(v-bind)：数据只能从data流向页面。
2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
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/> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>
<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</html>
009_Vue技术_el与data的两种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>el与data的两种写法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式：data:function(){...} 可简写为 data(){...}
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，this就是Window对象了。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//el的两种写法
/* const v = new Vue({
//el:'#root', //第一种写法
data:{
name:'尚硅谷'
}
})
console.log(v)
v.$mount('#root') //第二种写法 */
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法：对象式
/* data:{
name:'尚硅谷'
} */
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'尚硅谷'
}
}
})
</script>
</html>
个人总结
箭头函数没有自己的this指向，如果在当前找不到对象，就会到外层去找。
事例说明：这里data()函数的对象是vm，那么这里的箭头函数中的this没有具体的指向，就查找外层，那么外层就是Window对象了。
010_Vue技术_理解MVVM
<!-- MVVM模型 1. M：模型(Model) ：data中的数据 2. V：视图(View) ：模板代码 3. VM：视图模型(ViewModel)：Vue实例 观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。例如以下代码。 --> <!-- 准备好一个容器--> <div id="root"> <h1>学校名称：{{name}}</h1> <h1>学校地址：{{address}}</h1> <!-- <h1>测试一下1：{{1+1}}</h1> <h1>测试一下2：{{$options}}</h1> <h1>测试一下3：{{$emit}}</h1> <h1>测试一下4：{{_c}}</h1> --> </div>
011_Vue技术_Object.defineProperty
为对象附加属性信息
<script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } //此方法可以为对象添加属性，参数：对象实例，对象新属性，对象属性的get和set等方法 Object.defineProperty(person,'age',{ // value:18,//单独使用时(不加以下任何配置项)，该属性不可枚举，不可修改，不可删除 // enumerable:true, //控制属性是否可以枚举，默认值是false，如Object.keys(person) // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) number = value } }) // console.log(Object.keys(person)) console.log(person) </script>
012_Vue技术_理解数据代理
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）--> <script type="text/javascript" > let obj = {x:100} let obj2 = {y:200} //此方法可以为对象添加属性，参数：对象实例，对象新属性，对象属性的get和set等方法 Object.defineProperty(obj2,'x',{ get(){ return obj.x }, set(value){ obj.x = value } }) </script>
那么，obj2对象中就有了x属性，并且是从obj对象获取和保存
013_Vue技术_Vue中的数据代理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue中的数据代理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写） 例如：本示例中的name和address属性，在浏览器中Console中查看vm对象，具有以下方法 get address: ƒ proxyGetter() set address: ƒ proxySetter(val) get name: ƒ proxyGetter() set name: ƒ proxySetter(val) 而这些方法是用的数据源是从vm._data中来的，这里的vm._data使用了数据劫持，用于UI上的更新。 2.Vue中数据代理的好处： 更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。 --> <!-- 准备好一个容器--> <div id="root"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', address:'宏福科技园' } }) </script> </html>
014_Vue技术_事件处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 事件的基本使用： 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了，而是Window对象了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参； --> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --> <button @click="showInfo1">点我提示信息1（不传参）</button> <button @click="showInfo2($event,66)">点我提示信息2（传参）</button> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', }, methods:{ 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('同学你好！！') } } }) </script> </html>
注意：
当事件绑定方法@click="showInfo1"的时候，如果不需要传参，可以省略方法名后面的括号。
当使用插值语法{{xxx()}}绑定方法的返回值的时候，必须写方法名后面的括号。
个人理解
当我想使用arguments获取参数信息，想测试看看，如下：
<button @click="showInfo3">点我提示信息3（默认传参）</button> <button @click="showInfo3(65)">点我提示信息4（传参）</button> showInfo3(){ console.log(arguments) alert('同学你好！！!') } <!-- 1）当点我提示信息3按钮的时候，在控制台中分别打印出如下信息： Arguments [PointerEvent, callee: ƒ, Symbol(Symbol.iterator): ƒ] 点我提示信息3（传参） 说明$event是默认传递的。 2）当点我提示信息3按钮的时候，在控制台中分别打印出如下信息： Arguments [65, callee: ƒ, Symbol(Symbol.iterator): ƒ] 说明当指定其他参数的时候，则不$event不是默认传递的，需要在调用方的时候明确指定，如上面的showInfo2($event,66)需要明确指定$event。 -->
015_Vue技术_事件修饰符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body> <!-- Vue中的事件修饰符： 1.prevent：阻止默认事件（常用）；相当于：e.preventDefault(); 2.stop：阻止事件冒泡（常用）；相当于：e.stopPropagation(); 3.once：事件只触发一次（常用）； 4.capture：使用事件的捕获模式；可以参考事件的捕获时处理函数，还是冒泡时处理函数 5.self：只有event.target是当前操作的元素时才触发事件； 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕； --> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止默认事件（常用） --> <a href="http://www.atguigu.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 class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件； --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕；（只针对部分事件使用，如scroll事件则不会等待，可自行测试） --> <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ alert('同学你好！') // console.log(e.target) }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } } }) </script> </html>
016_Vue技术_键盘事件
<body> <!-- 1.Vue中常用的按键别名： 回车 => enter 删除 => delete (捕获“删除”和“退格”键) 退出 => esc 空格 => space 换行 => tab (特殊，必须配合keydown去使用) 上 => up 下 => down 左 => left 右 => right 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2).配合keydown使用：正常触发事件。 4.也可以使用keyCode去指定具体的按键（不推荐），例如：@keydown.13="showInfo" 5.自定义键名，使用Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名，如下面的huiche --> <!-- 准备好一个容器--> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods: { showInfo(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script>
017_Vue技术_事件总结
<div class="demo1" @click="showInfo"> <!-- 修饰符可以连续写，如链接的先阻止默认行为，再阻止冒泡 --> <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!--键盘的组合按键连续写，如按Ctrl+y组合键--> <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
018_Vue技术_姓名案例
实现需求：修改姓或名的时候，全名也跟着变化，并且可能会有姓名截取、反转、大小写等
<body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span><!--姓名案例_插值语法实现，vue官网不推荐此写法--> 全名：<span>{{fullName()}}</span><!--姓名案例_methods实现--> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, methods: { fullName(){ //每次修改姓和名，该方法都会被调用 console.log('@---fullName') return this.firstName + '-' + this.lastName //也可以实现字符串截取、反转、大写等 } }, }) </script>
那么 data 中的任何一个数据发生变化，界面模板（el绑定的元素对象）都要重新解析一遍，包括此处插值语法绑定的方法，所以控制台会显示执行了多次。
019_Vue技术_计算属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 计算属性： 1.定义：要用的属性不存在，要通过已有属性计算得来。 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 3.get函数什么时候执行？ (1).初次读取时会执行一次。以后每次再读取，直接从缓存中读取。 (2).当依赖的数据发生改变时会被再次调用。 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。 --> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 测试：<input type="text" v-model="x"> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> <!-- 全名：<span>{{fullName}}</span> <br/><br/> 全名：<span>{{fullName}}</span> <br/><br/> 全名：<span>{{fullName}}</span> --> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', x:'你好' }, computed:{ fullName:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') //界面随有多次绑定fullName，但此处只会打印一次，因为有缓存机制 // 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] } } } }) </script> </html>
020_Vue技术_计算属性_简写
021_Vue技术_天气案例
022_Vue技术_监视属性
023_Vue技术_深度监视
024_Vue技术_监视的简写形式
025_Vue技术_watch对比computed
<!-- computed和watch之间的区别： 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小原则： 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。 -->
个人理解
在Vue内所管理的普通函数的内部（例如下面的watch中的firstName函数），使用了不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这里写成箭头函数，就无法使用this找到vm对象了，那么就会往上层（外层）递归查找this对象，就会找到Window对象了。
const vm = new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张-三'
},
watch:{
firstName(val){
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val
}
}
})
026_绑定class样式
027_绑定style样式
028_条件渲染
029_列表渲染
030_key作用与原理
031_列表过滤
032_列表排序
033_更新时的一个问题
034_Vue监测数据的原理_对象
035_Vue.set()方法
036_Vue监测数据的原理_数组
037_总结Vue监视数据
038_收集表单数据
039_过滤器
040_v-text指令
041_v-html指令
042_v-cloak指令
043_v-once指令
044_v-pre指令
045_自定义指令_函数式
046_自定义指令_对象式
047_自定义指令_总结
048_引出生命周期
049_生命周期_挂载流程
050_生命周期_更新流程
051_生命周期_销毁流程
052_生命周期_总结
053_对组件的理解
054_非单文件组件
055_组件的几个注意点
056_组件的嵌套
057_VueComponent构造函数
058_Vue实例与组件实例
059_一个重要的内置关系
060_单文件组件
061_创建Vue脚手架
062_分析脚手架结构
063_render函数
064_修改默认配置
065_ref属性
066_props配置
067_mixin混入
068_插件
069_scoped样式
070_TodoList案例_静态
071_TodoList案例_初始化列表
072_TodoList案例_添加
073_TodoList案例_勾选
074_TodoList案例_删除
075_TodoList案例_底部统计
076_TodoList案例_底部交互
077_TodoList案例_总结
078_浏览器本地存储
079_TodoList_本地存储
080_组件自定义事件_绑定
081_组件自定义事件_解绑
082_组件自定义事件_总结
083_TodoList案例_自定义事件
084_全局事件总线1
085_全局事件总线2
086_TodoList案例_事件总线
087_消息订阅与发布_pubsub
088_TodoList案例_pubsub
089_TodoList案例_编辑
090_$nextTick
091_动画效果
092_过度效果
093_多个元素过度
094_集成第三方动画
095_总结过度与动画
096_配置代理_方式一
097_配置代理_方式二
098_github案例_静态组件
099_github案例_列表展示
100_github案例_完善案例
101_vue-resource
102_默认插槽
103_具名插槽
104_作用域插槽
105_Vuex简介
106_求和案例_纯vue版
107_Vuex工作原理图
108_搭建Vuex环境
109_求和案例_vuex版
110_vuex开发者工具的使用
111_getters配置项
112_mapState与mapGetters
113_mapActions与mapMutations
114_多组件共享数据
115_vuex模块化+namespace_1
116_vuex模块化+namespace_2
117_路由的简介
118_路由基本使用
119_几个注意点
120_嵌套路由
121_路由的query参数
122_命名路由
123_路由的params参数
124_路由的props配置
125_router-link的replace属性
126_编程式路由导航
127_缓存路由组件
128_两个新的生命周期钩子
129_全局前置_路由守卫
130_全局后置_路由守卫
131_独享路由守卫
132_组件内路由守卫
133_history模式与hash模式
134_element-ui基本使用
135_element-ui按需引入
136_Vue3技术_vue3简介
137_Vue3技术_使用vue-cli创建工程
138_Vue3技术_使用vite创建工程
139_Vue3技术_分析工程结构
140_Vue3技术_安装开发者工具
141_Vue3技术_初识setup
142_Vue3技术_ref函数_处理基本类型
143_Vue3技术_ref函数_处理对象类型
144_Vue3技术_reactive函数
145_Vue3技术_回顾Vue2的响应式原理
146_Vue3技术_Vue3响应式原理_Proxy
147_Vue3技术_Vue3响应式原理_Reflect
148_Vue3技术_reactive对比ref
149_Vue3技术_setup的两个注意点
150_Vue3技术_computed计算属性
151_Vue3技术_watch监视ref定义的数据
152_Vue3技术_watch监视reactive定义的数据
153_Vue3技术_watch时value的问题
154_Vue3技术_watchEffect函数
155_Vue3技术_Vue3生命周期
156_Vue3技术_自定义hook
157_Vue3技术_toRef与toRefs
158_Vue3技术_shallowReactive与shallowRef
159_Vue3技术_readonly与shallowReadonly
160_Vue3技术_toRaw与markRaw
161_Vue3技术_customRef
162_Vue3技术_provide与inject
163_Vue3技术_响应式数据的判断
164_Vue3技术_CompositionAPI的优势
165_Vue3技术_Fragment组件
166_Vue3技术_Teleport组件
167_Vue3技术_Suspense组件
168_Vue3技术_Vue3中其他的改变
=======================================================================================
=======================================================================================
如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【关注我】。(●'◡'●)
因为，我的写作热情也离不开您的肯定与支持，感谢您的阅读，我是【Jack_孟】！
本文来自博客园，作者：jack_Meng，转载请注明原文链接：https://www.cnblogs.com/mq0036/p/17625205.html
【免责声明】本文来自源于网络，如涉及版权或侵权问题，请及时联系我们，我们将第一时间删除或更改！
