Vue3的md笔记

学习vue3过程中的一些笔记,记录自己对知识点的理解

创建Vue3.0工程

使用 vue-cli 创建:
## 查看@vue/cli版本,确保版本在4.5.0以上
##vue --version
## 安装或者升级你的@vue/cli
	npm install -g @vue/cli
## 创建
	vue create vue_test
## 启动
	cd vue_test
	npm run serve
vite —— 新一代前端构建工具。按需编译。开发环境中不用打包,快速冷启动。轻量快速的热重载。

使用 vite 创建:
## 创建工程
/npm init vite-app <project-name>
	npm init vue@latest//会安装并执行create-vue(底层切换到了vite)
## 进入工程目录
	cd <project-name>
## 安装依赖
	npm install
## 运行
	npm run dev

Vue3的main.js

//引入的不再是Vue构造函数,而是createApp工厂函数,接受一个根组件作为参数,并返回一个应用实例。
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象——app(类似于Vue2的vm,但app更“轻”)
const app = createApp(App)

//将Vue应用程序渲染到指定id的HTML元素中。
app.mount('#app')

setup–一个函数,是vue3新的配置项

组件中所用到的:数据、方法等等,均要配置在setup中。
返回对象中的属性、方法, 在模板中可直接使用。
注意:不要再混用Vue2配置(data、methos、computed...)。

setup(){
	...
	return {}
}

ref函数–定义响应式的数据

把数据加工为引用对象,实现响应式。
接收的数据:
- 基本类型:响应式靠Object.defineProperty()的get与set完成。
- 对象类型:内部求助Vue3.0中的新函数—— reactive函数。

const xxx = ref(initValue)
- JS中操作数据: xxx.value
- 模板中读取数据: <div>{{xxx}}</div>

import {ref} from 'vue'
setup(){
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
        type:'hello',
        name:'98K'
    })
    
    function changeInfo(){
				 name.value = '李四'
				job.value.salary = '60K'
			}

    return {
        name,
        age,
        job,
        changeInfo
    }
 }   

reactive函数–定义一个对象类型的响应式数据

const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)

import {reactive} from 'vue'
setup(){
    let job = reactive({
        type:'hello',
        name:'98K'
    })
    
    function A(){
				job.salary = '60K'//不用.value,可直接引用
			}

    return {
        job,
        A
    }
 }   

computed函数

import {computed} from 'vue'
setup(){	
	//简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
}

watch函数

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

    //多个
    watch([sum,msg],(newValue,oldValue)=>{
        ...
    }) 
    
reactive定义的响应式数据:
    /* 监视对象,无法获得oldValue!且强制开启了深度监视,deep配置不再奏效*/
    watch(person,(newValue,oldValue)=>{
        ...
    },{immediate:true,deep:false}) 

    //监视 对象的某个属性,deep配置有效
    watch(()=>person.job,(newValue,oldValue)=>{
        ...
    },{immediate:true,deep:true}) 

    //监视 多个属性
    watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
        ...
    },{immediate:true,deep:true})

watchEffect–不指明监视哪个属性。监视的回调中用到哪个属性就监视哪个属性

import {watchEffect} from 'vue'
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

生命周期

命名变化: 
 	beforeDestroy ==>BeforeUnmount
    Destroyed ======>Unmounted
    
Vue3 API形式的生命周期钩子,对应关系如下:
    beforeCreate===>setup()
    created=======>setup()
    beforeMount ===>onBeforeMount
    mounted=======>onMounted
    beforeUpdate===>onBeforeUpdate
    updated =======>onUpdated
    beforeUnmount ==>onBeforeUnmount
    unmounted =====>onUnmounted

toRef–将对象中的属性单独提供给外部使用

	<h2>姓名:{{name}}</h2>
	<h2>薪资:{{job.salary}}</h2>
	
setup(){
        let person = reactive({
            name:'张三',
            job:{
                salary:20
            }
        })		
        // const name2 = toRef(person,'name')
        return {
            // name:toRef(person,'name'),
            // salary:toRef(person.job,'salary'),
            ...toRefs(person)//批量创建多个ref对象
        }
	}

自定义hook函数–把setup的组合式API进行封装,实现代码复用。跟Vue2的mixin相似。

hooks->xx文件中定义:
    export default function (){
        let point = reactive({
            x:0,
            y:0
        })
        onMounted(()=>{
            ...
        })
        return point
    }

使用:
	<h2>{{point.x}},{{point.y}}</h2>
	
	import xx from '../hooks/xx'
	export default {
		name:'Test',
		setup(){
			const point = xx()
			return {point}
		}
	}

shallowReactive 与 shallowRef–浅响应式,针对对象。

shallowReactive:只处理对象最外层属性的响应式。
	let person = shallowReactive({
				name:'张三',
				age:18,
				job:{
					salary:20
				}
			})
shallowRef:只处理基本数据类型的响应式, 不处理对象的响应式。

readonly 与 shallowReadonly–不希望数据被修改时使用

readonly: 让一个响应式数据变为只读的(深层对象也只读)。
	person = readonly(person)

shallowReadonly:让一个响应式数据变为只读的(仅是外层对象只读)。

toRaw 与 markRaw

toRaw:将一个由reactive生成的响应式对象转为普通对象。
markRaw:标记一个对象,使其永远不会再成为响应式对象。

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

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

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			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>

provide 与 inject–实现祖与后代组件间(跨级)通信

provide定义数据,自动向下传递给所有子组件,子组件使用inject注入数据。

祖组件定义:
setup(){
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
}

后代组件使用:
setup(){
    const car = inject('car')
    return {car}
}

响应式数据的判断

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

Composition API 的优势

传统API,新增一个需求,就要分别在data,methods,computed里添加,代码分散。
组合式API可以将数据和方法放在同一块区域,代码更加有序。为了更好发挥这个优势,可使用hook函数,对组合式API进行封装。

teleport–将组件html结构移动到指定位置。

比如展示一个弹窗:、
<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

Suspense–在异步组件加载完成之前,展示一些占位符内容,避免页面空白。

异步引入组件:
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>
            //加载完成后,fallback节点会被替换成异步组件
                <template v-slot:fallback>
                    <h3>加载中.....</h3>
                </template>
            </Suspense>
	</div>
</template>

Pinia–是vuex的替代品

提供更加简单的API (去掉了mutation )
去掉了 modules 的概念,每一个store都是一个独立的模块
提供符合组合式风格的API (和 Vue3 新语法统一)
定义
import{defineStore}from'pinia'
import{ref}from'vue'
export const useCounterStore = defineStore('counter',()=>{
    const count = ref(0)      //state
    const increment =()=>{    //action,与vuex不同,可同步可异步。
    	count.value++
    }
    //getter 
    const doubleCount = computed(()=>count.value*2)
}
	return{count,increment}
})

使用:
<script>
	import {useCounterStore} from '@/stores/counter'
	const counterStore = useCounterStore()
    
    //保持数据响应式
	//const { count, doubleCount } = storeToRefs(counterStore)
</script>
<template>
	<button @click="counterStore.increment">
		{{counterStore.count}}
	</button>
</template>

语法糖–能让代码易读和易写。比如箭头函数、

<script>
export default{
    setup (){
        const message ='this is message'
        const AA = ()=>{}
        return {message,AA}
        }
     }
</script>
变成:
    <script setup>
        const message ='this is message'
        const AA = ()=>{}
    </script>

export default 和 export 区别–都是ES6语法

export 可以导出多个,导入的时候要加花括号{}
导出:
    export let i = “hello”;
    export function get(){ };
    或者:
        let i = “hello";
        function get(){ };
        export { i,get } 
导入:import { i,get } from '...';    

export default 只能导出一个,导入不用加花括号。先定义后导出
	function get(){ };
	export default get
	
	import get from '...';
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 尚硅谷的Vue MD笔记是一份非常优秀的学习资料。通过这份笔记,我能够系统地学习和掌握Vue.js框架的核心知识和技能。 首先,Vue MD笔记详细介绍了Vue.js的基本概念和核心特性,包括数据绑定、指令、组件等。通过学习这些基础知识,我能够清楚地理解Vue.js的工作原理和实现机制。 其次,笔记中还提供了大量的实例演示和代码示例,这对我来说非常有帮助。通过这些实例,我能够深入了解Vue.js的使用方法和技巧,同时也可以通过模仿和修改代码来练习和巩固所学的知识。 此外,笔记中还介绍了Vue.js在实际项目中的应用场景和开发经验,这对我在实际开发中的指导非常有帮助。我学会了如何搭建Vue.js项目,如何使用Vue CLI、Vue Router等常用工具和插件,并了解了一些Vue.js的最佳实践和性能优化技巧。 最后,我觉得笔记的编写方式非常清晰和易于理解。它使用了简洁明了的语言,配合大量的图表和示意图,能够很好地帮助我理解和记忆所学的知识点。 总体而言,尚硅谷的Vue MD笔记是一份非常宝贵的学习资料。通过学习这份笔记,我能够系统地学习和掌握Vue.js框架的核心知识和技能,并在实际项目中灵活运用。我相信,这份笔记将帮助我成为一名优秀的Vue.js开发者。 ### 回答2: 尚硅谷Vue.md笔记是一份学习Vue框架的笔记资料,它包含了Vue的基本概念、核心特性和使用方法等内容。 这份笔记首先介绍了Vue的起源和背景,简要讲解了Vue是一个响应式的JavaScript框架,能够轻松构建用户界面。接着,笔记详细介绍了Vue中的数据绑定、指令、计算属性、组件化等核心概念和特性。通过学习这些内容,我们可以更好地理解Vue的工作原理和使用方法。 此外,笔记还特别强调了Vue与其他框架的比较和优劣势分析,帮助我们更好地选择适合自己项目的技术栈。同时,笔记中也提供了大量的实例代码和示例,通过实践练习可以更好地掌握Vue的使用。 还有一个关键的特点是笔记的结构清晰、重点突出,对于各个知识点的讲解都较为详细,同时也提供了相关的参考资料和学习资源,方便我们进一步深入学习和扩展。 总之,尚硅谷Vue.md笔记是一份非常有价值的学习资料,对于想要学习Vue框架的开发者来说,它可以帮助我们快速入门和深入学习,并且提供了丰富的实例和相关资源,是一份非常推荐的学习材料。 ### 回答3: 《尚硅谷Vue.md笔记》是一本关于Vue.js技术的学习笔记,内容丰富全面。本书主要包含了Vue.js的基础知识、进阶技巧和实战项目等方面的内容。 首先,本书的前部分介绍了Vue.js的基本概念和核心特性,如数据绑定、指令、组件、路由等。通过对这些知识点的深入讲解,读者可以很好地理解Vue.js的设计原理和运行机制。 其次,本书的中部内容涵盖了Vue.js的进阶技巧和最佳实践。作者通过实例代码和详细的讲解,介绍了Vue.js的高级特性和常用的组件开发方法。此外,还介绍了一些优化和调试技巧,帮助读者提升Vue.js应用的性能和开发效率。 最后,本书的后部分是一些实战项目,作者通过开发一些常见的网页应用,如购物车、音乐播放器等,来帮助读者巩固所学的Vue.js知识。通过实践,读者能够学会如何将Vue.js应用到实际项目中,并了解如何解决实际开发中遇到的问题。 总体来说,本书不仅系统地介绍了Vue.js的核心概念和基本用法,还通过丰富的实例和实战项目,帮助读者更好地理解和应用所学的知识。对于想要学习Vue.js的初学者和有一定经验的开发者来说,这本书是一份优秀的学习资料。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值