jxbook的博客

keep-alive：有时候我们不希望输入的值不被消除，或者不想重新渲染从而提高性能，维持当前状态，我们就可以使用内置组件keep-alive。-- 和 `<transition>` 一起使用 -->-- 多个条件判断的子组件 -->

Teleport：想我们的模板渲染到指定的DOM节点，完全不受父级style的影响。<Teleport to="body">//将组件渲染到body节点。

图片展示

</slot>）,父组件可以在这个占位符填充HTML、组件等，填充的内容会替换子组件的占位符<slot>我是一个具名插槽</div><div>我是一个匿名插槽</div>-- 具名插槽简写和作用域插槽 --><div>作用域插槽

createApp(App).component('组件名称',全局组件).mount('#app')在项目中使用频率高的组件可以设置成全局组件，像table，button，icon等。import 全局组件 from './components/全局组件.vue'在项目中注册全局组件。main.ts文件中。

title="父组件传的值" msg="Hello World" @on-click="getList"></HelloWorld><HelloWorld title="父组件传的值" msg="Hello World"></HelloWorld><HelloWorld title="父组件传的值" msg="Hello World"console.log(list,'父组件接受子组件的值')子组件：通过defineProps接受父组件传过来的值。父组件：导入子组件，通过v-bind向子组件传参。

console.log('跟新之前====>',btn.value?//获取数据更新之前的数据。console.log('跟新之后====>',btn.value?//获取数据更新之后的数据。console.log('挂载之后====>',btn.value);console.log('挂载之前====>',btn.value) //无法获取根元素。console.log('卸载之前====>',);console.log('卸载之后====>',);组件：项目中所有.vue的文件都视为组件。

flush:'pre' ,//pre:组件更新前执行 sync:强制效果始终同步触发 post:组件更新后执行。flush:更多的配置选项 pre:组件更新前执行 sync:强制效果始终同步触发 post:组件更新后执行。oninvalidate(()=>{ //监听数据变化之前调用 清除副作用。onTrigger：更多的配置选项 开启debugger，帮助调试。let msg1 = ref<string>('第一个消息')let msg2 = ref<string>('第二个消息')

参数：1：监听数据源 2：参数回调函数（newVal,oldVal） 3:options:{immediate:true,//是否立即调用一次 deep:true,//是否开启深度监听}immediate:true,//是否立即调用一次。watch：侦听需要的数据源，并在回调函数中执行副作用。//能监听到数据，但是newVal==oldVal。//能监听到数据，但是newVal==oldVal。deep:true,//是否开启深度监听。监听对象需要开启 deep:true。//开不开启都能监听到。

删除名称</th><th>数量</th><th>价格</th><th>操作

可以帮我们批量创建ref对象主要是方便我们解构使用（复制 reactive 里的所有属性并转成 ref）的就不会更新视图 数据是会变的，如果原始对象是响应式的是会更新视图并且改变数据的。const rraw = toRaw(person) //转为普通对象。注：数据（info ，rGreet ）会变化，视图会更新。// 复制 info 里的 greet 属性。uname.value= '嘿嘿'注：数据会变化，但是视图不会更新。// 更改 rGreet。将响应式对象转为普通对象。注：解构数据的时候常用。

申明响应式变量，但只能申明应用类型，例如Array、Object、Map和Set等，用来绑定复杂数据type F = {age:numbername:'安安',age:18})form.name = '嘻嘻'ref和reactive的区别：ref支持所有类型 reactive只支持引用类型Array、Object、Map和Set等ref取值赋值都需要.value,而reactive不需要。

判断是不是一个ref对象 console.log(isRef(name)) //true。const obj = shallowRef<Obj>({name:"小名"})obj.value = { //视图会更新 只对value进行响应。const name =ref<string>('这是一个名字')obj.value.name = '小姜' //视图不会变化。const aa = shallowRef('强制更新')name.value = '改变了名字'aa.value = '强制更新了'

npm => npm init vite@latest => vite-project(输入你的项目名称) => 选择模板vue、react等 => 选择JavaScript、typescript等 => 安装依赖 npm install => 切换到目录 cd projectName => 启动项目 npm run dev。src=>components 下面用来存放我们的组件。vite.config.ts vite的具体配置文件。src=>assets 下面可以存放可编译的静态资源。