vue3笔记
1.两种安装方式
(1)直接创建项目vue3
(2)使用vite
组件传值
1.组件传值的用法
从父组件向子组件传值：
<Son :prop1="nmb"></Son>
2.defineprops函数
defineProps函数在setup标签内不需要引入，可直接使用
defineProps({
prop1:Number,
});
根据传入的值来设置格式
3.prop类型的较验
子组件required:true写的话，父组件必须传入属性值
default:999 子组件默认值999
vue3
1.setup
1.理解:vue3.0中一个新的配置项，值为一个函数。
2.setup是所有Composition API(组合API)
3.组件中所用到的: 数据，方法等等，均要配置在setup中。
4.setup函数的两种返回值:
1.若返回一个对象，则对象中的属性方法，在模板中均可以直接使用。(重点关注)。
2.若返回一个渲染函数:则可以自定义渲染内容.(了解)。
5.注意点:
1.尽量不要与vue2.x配置混用
vue2.x配置(data，methods，computed...) 中可以访问到setup中的属性，方法。
但在setup中不能访问到vue2.x配置(data，methods，computed...)。
如果有重名，setup优先。
2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。
2.ref函数
作用 ： 定义一个响应式的数据
语法 ：const xxx = ref(initvalue)
创建一个包含响应式数据的引用对象 (reference对象,简称ref对象)。
JS中操作数据 : xxx.value
模板中读取数据 : 不需要。value，直接 <div>{{xxx}}</div>
备注:
接受的数据可以是 : 基本类型，也可以是对象类型。
基本类型的数据 : 响应式依然是靠Object.defineProperty( )的get与set完成的.
对象类型的数据 : 内部求助了 vue3.0中的一个新函数--------reactive函数
3.reactive函数
作用 : 定义一个对象类型的响应式数据 (基本类型不要用它，要用ref函数)
语法 : const 代理对象 = reactive( 源对象) 接受一个对象 (或数组), 返回一个代理对象 ( proxy对象)
reactive定义的响应式数据是深层次的。
内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作。
4. vue3.0中的响应式原理
vue2.x的响应式
实现原理:
对象类型 : 通过Object。defineProperty( )对属性的读取，修改进行拦截(数据劫持)。
数组类型 : 通过重写更新数组的一系列方法来实现拦截. (对数组的变更方法进行了包裹)。
Object.defineProperty(data,'count'){
get( ) { },
set ( ) { }
}
存在问题 :
新增属性，删除属性 界面不会更新。
直接通过下标修改数组，界面不会自动更新。
vue3.0的响应式
实现原理 :
通过Proxy (代理) :拦截对象中任意属性的变化，包括 : 属性值的读写，属性的添加，属性的删除等。
通过Reflect (反射) : 对被代理对象的属性进行操作.
5.reactive对比ref
从定义数据角度对比 :
ref用来定义 :基本类型数据
reactive用来定义 : 对象 (或数组) 类型数据.
备注 : ref也可以用来定义对象 (或数组) 类型数据 ， 它内部会自动通过reactive转为代理对象
从原理角度对比 :
ref通过Object.defineProperty ( )的 get和 set来实现响应式 (数据劫持)。
reactive通过使用Proxy来实现响应式( 数据劫持),并通过Reflect操作源对象内部的数据。
从使用角度对比 :
ref定义的数据 : 操作数据需要.value,读取数据时模板中直接读取不需要.value.
reactive定义的数据 : 操作数据与读取数据 : 均不需要.value