Vue3 的基础内容

报错： Cannot read properties of null (reading 'clientWidth')

您的JS运行的时候你的页面还没有加载完成，所以你的JS代码找不到你的页面元素，就会抛出这个问题，所以要放在生命周期函数mounted

1. 在main.js文件

/* vue3 写法 */
import { createApp } from 'vue'
import App from './App.vue'
//导入路由
import router from './route';
const app = createApp(App);
app.use(router);
app.mount("#app");


/* vue2 写法 */
import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

2. 代理对象proxy直接使用

虽然穿过来的参数 和 this.data ，都是代理对象，当可以直接像Vue2那样使用

//打印的结构是这样的，比较干净

proxy {
    "title": "用户",
    "index": "user"
}

handleMenuItem(obj){
      //高亮设置
      this.activeTabName = obj.index;
      let result = this.editableTabs.findIndex((item) => {
        return item.index == obj.index;
      });
      if(result != -1){
        return; 
      }
      this.editableTabs.push(obj);
},

3. 事件处理

在使用vue-draggable-resizable进行拖拽，里面有滚动条，在电脑屏幕上拖拽没问题，但在触屏的上，在滚动条部分拖拽，导致滚动条产生边滚动，边移动。

非Prop得Attribute，

<demo id="demo" class="box"></demo>
const demo = {
        template: `<p>非prop的attribute</p>`
}
显示结果
<p id="demo" class="box">非prop的attribute</p>

自定义事件

原来父子组件通信的 this.$emit('myEvent') ，my-component @my-event="doSomething"></my-component> 就是自定义事件

插槽

应用场景：

自己写一次性组件不会用到，只有像Element UI库这种，才会使用插槽

模板引用

关于$refs 只会在组件渲染完成之后生效 ,这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问$refs

<input ref="input" />
this.$refs.input.focus()
这仅作为一个用于直接操作子元素的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

组合式API

注意：

• setup 选项在组件被创建之前执行 ，所以里面找不到 this

• setup 选项是一个 接收 props 和 context 的函数 ，通过return 将内容暴露给组件的 计算属性、方法、生命周期函数等等。

其实关键在于抽离逻辑关注点目前军分区项目，业务过于简单

响应性API

//ref 具有响应性

const count = ref(1);
console.log(count); //打印 1


//reactive： 返回对象的响应式副本，并且能够使所有嵌套在里面的属性，都变成响应性的

const obj = reactive({ name:'滕' })
console.log(obj.name); //打印 滕

vue3 setup中 拿到返回的数据 如何直接赋值给响应式变量

// 这几种办法都可以触发响应性，推荐第一种
// 方案1：创建一个响应式对象，对象的属性是数组
const state = reactive({
    arr: []
});
state.arr = [1, 2, 3]

// 方案2: 使用ref函数
const state = ref([])
state.value = [1, 2, 3]

// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])