学习vue

setup

监听数据

import { watch , watchEffect ,computed ，ref,reactive} from 'vue' //ref设置响应式的基本数据类型 reactive 设置响应式的引用数据类型
// watchEffect 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
let WatchStopHandle= watchEffect(()=>{ 逻辑代码 })
// watchEffect 返回一个WatchStopHandle函数用来停止监听
// WatchStopHandle()取消监听
    // 清除副作用
    // 在一些情况下，我们需要在监听函数中执行ajax请求，但是在网络请求还没有到达服务的时候，需要停止监听或者监听函数被再次执行
    // 在这种情况下，五年应该把上次网络请求去停止掉，这个时候就可以清除上一次的副作用
    // 在watchEffect 传入的回调函数中，有一个默认参数（方法） onInvlidate（回调函数）
    let stopWatch = watchEffect((onInvalidate) => {
      console.log("name==>", name.value);
      console.log("age==>", age.value);
      // setTimeout==>模拟ajax请求  
      let timer = setTimeout(() => {
        console.log("发送后端的数据,2秒后执行");
      }, 2000);
      onInvalidate(() => {
        clearTimeout(timer);
      });
    });	
//  watch 监听使用 reactive 声明的响应式数据变化 有三个参数 第一个需要 ()=>监听的数据，第二个回调函数，第三个对象配置是否深度监听，是否初始化执行    immediate:true,//初始化执行
    // {flush:'pre'|'post'|'sync'}
    // pre 默认参数 它会在元素挂载或者更新 前 去执行Effect回调函数
    // post 它会在元素挂载或者更新 后 去执行Effect回调函数
    // sync 强制效果始终同步触发 ==> 然而 这是抵消的 应该减少使用
//computed 计算属性作为一个方式使用具有返回值 computed()

使用 $router

import { useRouter , useRoute } from ' vue-router ' ; 
let router=useRouter()  //这是**router**就相当于原来的this.$router

使用vuex
import { useStore } from ‘vuex’
使用ref获取dom
let refs=ref(null) ; 给对应的dom 写上 ref=‘refs’ 就可以通过refs.value获取dom元素了
setup中使用nextTick
首先 import { nextTick } from ‘vue’; 例子如下；
使用nextTick

  async function fn() {
      await nextTick(); 
      ipt.value.focus();
    }

setup语法糖 在script中写个一个setup

那些书写格式，retun都可以省略掉，只需import导入使用即可,下面是组件传值

import { defineProps ,defineEmits , defineExpose , useAttrs , useSlots } from 'vue'
defineProps({  // 接受父组件传递过来的数据
    ky: String
})
const emit=defineEmits(['cks']) // 调用父组件定义好的自定义方法
// 	emit("cks",'传值') 调用
defineExpose({
	// 需要暴露的数据，和方法
})

withDefaults 帮助ts定义defineProps传递数据的类型
vue3样式支持使用v-bind了

body{
	font-size:v-bind(size)
}

getCurrentInstance 支持访问内部组件实例 。并挂载属性

import { getCurrentInstance } from "vue";
let internalInstance = getCurrentInstance().appContext.config.globalProperties;
//获取createApp身上的属性

router-link

在vue3.0中< router-link / >中的tag属性被移出，不能修改< router-link >的默
认标签，但是vue3.0中给我们提供了 custom 配置 ,不通过tag属性修改，直接嵌套
< router-link > 中，又会出现一个问题,原标签的 to 属性失效，vue提供 v-slot 插槽 暴露底层的制定能力 navigate 是解析后的规范地址 放在我们的v-slot中
最后配合 @click=“navigate” 实现了页面跳转
exact active class 给当前页面路由对应的< router-link/ > 跳转的地址精准一直就添加一个calss类名，这个属性在vue3.0被废弃，但是 v-slot 中暴露的 isExactActive 为true填

    <router-link custom v-slot="{navigate,isExactActive}" v-for="item,i in tabs" :key="i" :to="item.url">
        <div @click="navigate" :class="{active:isExactActive}">
          <span>{{item.name}}</span>
        </div>

在vue3.0中 $router.psuh(’’) 不会出现重复跳转当前路由报错的问题，那就意味我们可以不使用标签了
vue3组件守卫中的第三个参数next没有了跳转页面的作用，vue3中改成了return 来实现跳转

transtion

在vue3中transtion 中的 从哪里离开和从哪里结束 的类名改变成了 from从哪开始 to 到哪里去
当我们用transtion包裹< router-view / > 是写法也发送了改变 需要使用 v-slot 暴露 Componten
并使用这个标签 并采用动态组件的行书书写 用 transtion 组件包裹

   <router-view v-slot="{ Component }">  // class类名 
      <transition>
        <component :is="Component" />
      </transition>
    </router-view>

当然了也可以直接用直接包裹要加动画的组件，div，路由，直接包裹路由如果有出现警告就要上边的方式包裹，如果还有警告，路由页面的组件内容还行vue2中哪有只放一个根节点。
vue3.0中要严格按照顺序去写

keep-alive

    <router-view v-slot="{ Component }">// 必须为最外曾
      <transition>
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

mitt一个类似于$bus的第三方插件

1下载 npm i mitt -S
`import mitt from ‘mitt’; const mits=mitt(); export default mits; //使用时导入用法和以前一样 import mits from ‘./mitt’;

实现 v-model

vue3混合
父组件 在子组件上 v-model=‘arr’
setup()中又两个参数，第一个接收props，第二个参数cnt中又atters如果props没有接收数据,就放在atters中
还有一个emit用于调用父组件的方法，类似于 vue2中的this.$emit();我们可以通过cnt.emit{(}^{\prime }update:modelValu{e}^{\prime }{,}^{\prime }传{参}^{\prime })这样就修改了父组件中的值我们还可以用v-mode:自定义=“父组件的数据”子组件中也可以直接使用cnt.emit{(}^{\prime }update:自定{义}^{\prime }{.}^{\prime }传{参}^{\prime })\ast \ast vue2\ast \ast v-mode其实是一个:value="value;@input="input"这个事件也可以是change的集合子组件调用this,$emit(‘input’,‘参数’) 就完成了对父组件数据的修改