vue3新用法第二节

已于 2023-03-02 13:14:50 修改
阅读量835 收藏 1
点赞数 4
文章标签： vue.js 前端 javascript
于 2022-06-22 23:55:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/work_fei/article/details/125418821
版权

[1. 相关资源]

[2. 初始化项目]

  1. 安装 vue-cli3

    npm install -g @vue/cli
# OR
yarn global add @vue/cli

[3. setup]

setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时，组件实例尚未被创建（在 setup() 内部，this 不会是该活跃实例的引用，即不指向vue实例，Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

4、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作： 父传子，props

import { toRefs } from 'vue'

setup(props) { const { title } = toRefs(props)

console.log(title.value)
 onMounted(() => {
  console.log('title: ' + props.title)
})

}

子传父，事件 - Emitting Events

举例，现在我们想在点击提交按钮时触发一个login的事件。

在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

login () { this.$emit('login', { username: this.username, password: this.password }) }

在setup()中的第二个参数content对象中就有emit，这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

然后我们在login方法中编写登陆事件 另外：context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构

setup (props, { attrs, slots, emit }) { // ... const login = () => { emit('login', { username: state.username, password: state.password }) }

// ...

}

3、 setup()内使用响应式数据时，需要通过.value获取

import { ref } from 'vue'

const count = ref(0) console.log(count.value) // 0

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

5、setup函数只能是同步的不能是异步的

[3.1 执行时机]

setup 函数会在 beforeCreate 之后、created 之前执行

[3.2 接收 props 数据]

  1. 在 props 中定义当前组件允许外界传递过来的参数名称：

    props: {
  p1: String
}

  2. 通过 setup 函数的第一个形参，接收 props 数据：

    setup(props) {
    console.log(props.p1)
}
import { reactive } from "@vue/composition-api";
​
export default {
  setup(props, ctx) {
    // console.log("setup");
    // console.log(props);
    // console.log(ctx);
​
    const state = reactive({ count: 0 });
​
    // console.log(state);
    // state.count += 1;
    // console.log(state)
​
    return state;
  },
  beforeCreate() {
    // console.log("beforeCreate");
  },
  created() {
    // console.log("created");
  },
  props: {
    p1: String
  }
};

[3.3 context]

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }
}

注意：在 setup() 函数中无法访问到 this

context ：上下文，包括 attrs 、 emit 、slots。 ① attrs :在此部分，接收在父组件传递过来的，并且没有在props中声明的参数参数。

② emit：子组件对父组件发送事件 在vue2中，子对父发送事件采用this.$emit对父组件发送事件，在vue3中子组件对父组件发送事件采用context.emit发送事件

// 在子组件中
<button @click="postMsg">
    我是子组件，我要向父组件发送事件了
</button>
​
// js 部分
setup(props,context){
    function postMsg(){
        console.log('我发送了')
        context.emit('pMSg',{msg:'我是子组件发送的信息'})
    }
    return {postMsg}
}
​
// 父组件中进行接收
<test @pMSg="func" />
    
// js 部分
setup(props,context){
    const func = (e)=>{
      console.log('子组件发送过来的信息',e)
    }
    return { func } 
 }
​

点击按键

[4. reactive]

reactive() 函数接收一个普通对象，返回一个响应式的数据对象。

[4.1 基本语法]

等价于 vue 2.x 中的 Vue.observable() 函数，vue 3.x 中提供了 reactive() 函数，用来创建响应式的数据对象，基本代码示例如下：

import { reactive } from '@vue/composition-api'
​
// 创建响应式数据对象，得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })

[4.2 定义响应式数据供 template 使用]

  1. 按需导入 reactive 函数：

    import { reactive } from '@vue/composition-api'

  2. 在 setup() 函数中调用 reactive() 函数，创建响应式数据对象：

    setup() {
     // 创建响应式数据对象
    const state = reactive({count: 0})
​
     // setup 函数中将响应式数据对象 return 出去，供 template 使用
    return state
}

  3. 在 template 中访问响应式数据：

    <p>当前的 count 值为：{{count}}</p>

[5. ref]

5.1 基本语法

ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：

import { ref } from '@vue/composition-api'
​
// 创建响应式数据对象 count，初始值为 0
const count = ref(0)
​
// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以
console.log(count.value) // 输出 0
// 让 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 输出 1

[5.2 在 template 中访问 ref 创建的响应式数据]

  1. 在 setup() 中创建响应式数据：

    import { ref } from '@vue/composition-api'
​
setup() {
    const count = ref(0)
​
     return {
         count,
         name: ref('zs')
     }
}

  2. 在 template 中访问响应式数据：

    <template>
  <p>{{count}} --- {{name}}</p>
</template>

[5.3 在 reactive 对象中访问 ref 创建的响应式数据]

当把 ref() 创建出来的响应式数据对象，挂载到 reactive() 上时，会自动把响应式数据对象展开为原始的值，不需通过 .value 就可以直接被访问，例如：

const count = ref(0)
const state = reactive({
  count
})
​
console.log(state.count) // 输出 0
state.count++ // 此处不需要通过 .value 就能直接访问原始值
console.log(count) // 输出 1

注意：新的 ref 会覆盖旧的 ref，示例代码如下：

// 创建 ref 并挂载到 reactive 中
const c1 = ref(0)
const state = reactive({
  c1
})
​
// 再次创建 ref，命名为 c2
const c2 = ref(9)
// 将 旧 ref c1 替换为 新 ref c2
state.c1 = c2
state.c1++
​
console.log(state.c1) // 输出 10
console.log(c2.value) // 输出 10
console.log(c1.value) // 输出 0

5.4ref获取节点

一；获取单个绑定了ref属性的标签结点
1.给想要获取DOM元素的标签加上 ref 属性，并自定义一个名称

2.在 setup 中使用 ref 声明一个变量名与标签中 ref 属性名称相同的变量

3.之后这个通过 ref 声明的变量中存储的就是 ref 属性标记了的元素DOM结点
 

<template>
  <div ref="getDom"> Ref属性获取dom </div>
</template>
 
<script>
import { ref } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 先定义一个空的响应式数据ref定义的
        // setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可
        let getDom= ref(null)
        return {
            getDom
        }
    }
}
</script>

二；获取 v-for 循环的多个 ref 结点

1.获取 v-for 循环的结点，需要动态绑定 ref 属性，并定义一个获取对应DOM元素的回调函数。

<template>
  <h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
 
<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 获取v-for遍历的元素
        // 定义一个空数组，准备接收循环的DOM元素
        // 定义动态 ref 所对应的回调函数，往空数组push Dom
        let listDom = []
        const getlist = (el) => {
            listDom.push(el)
        }
        return {
            getlist
        }
    }
}
</script>

[6. isRef]

isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：

import { isRef } from 'vue'
​
const unwrapped = isRef(foo) ? foo.value : foo

[7. toRefs]

toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据，最常见的应用场景如下：

import { toRefs } from '@vue/composition-api'
​
setup() {
    // 定义响应式数据对象
    const state = reactive({
      count: 0
    })
​
    // 定义页面上可用的事件处理函数
    const increment = () => {
      state.count++
    }
​
    // 在 setup 中返回一个对象供页面使用
    // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
    return {
      // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
      ...toRefs(state),
      // 自增的事件处理函数
      increment
    }
}

页面上可以直接访问 setup() 中 return 出来的响应式数据：

<template>
  <div>
    <p>当前的count值为：{{count}}</p>
    <button @click="increment">+1</button>
  </div>
</template>

[8. computed]

computed() 用来创建计算属性，computed() 函数的返回值是一个 ref 的实例。使用 computed 之前需要按需导入：

import { computed } from '@vue/composition-api'

[8.1 创建只读的计算属性]

在调用 computed() 函数期间，传入一个 function 函数，可以得到一个只读的计算属性，示例代码如下：

// 创建一个 ref 响应式数据
const count = ref(1)
​
// 根据 count 的值，创建一个响应式的计算属性 plusOne
// 它会根据依赖的 ref 自动计算并返回一个新的 ref
const plusOne = computed(() => count.value + 1)
​
console.log(plusOne.value) // 输出 2
plusOne.value++ // error

[8.2 创建可读可写的计算属性]

在调用 computed() 函数期间，传入一个包含 get 和 set 函数的对象，可以得到一个可读可写的计算属性，示例代码如下：

// 创建一个 ref 响应式数据
const count = ref(1)
​
// 创建一个 computed 计算属性
const plusOne = computed({
  // 取值函数
  get: () => count.value + 1,
  // 赋值函数
  set: val => {
    count.value = val - 1
  }
})
​
// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8

[9. watch]

watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入：

import { watch } from '@vue/composition-api'

[9.1 基本用法]

const count = ref(0)
​
// 定义 watch，只要 count 值变化，就会触发 watch 回调
// watch 会在创建时会自动调用一次
watch(() => console.log(count.value))
// 输出 0
​
setTimeout(() => {
  count.value++
  // 输出 1
}, 1000)

// Vue2使用watch
<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
<script>
import { ref } from "vue";
export default {
  // vue2中使用watch
  watch: {
    sum: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("总合 sum 变化：", newValue, oldValue);
      },
    },
  },
  setup() {
    let sum = ref(0);
    return {
      sum,
    };
  },
};
</script>

<style>
</style>

// Vue3使用watch
// watch有三个参数：
// 参数1：监听的参数
// 参数2：监听的回调函数
// 参数3：监听的配置（immediate）

// =============================情况1
// 监视ref所定义的一个响应式数据
<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
</template>
// 监视ref所定义的一个响应式数据
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    // 监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum ==> ", newValue, oldValue);
    });
    return {
      sum,
    };
  },
};
</script>
// result
// sum ==> 1  0
// sum ==> 2  1
// sum ==> 3  2
// sum ==> 4  3
// sum ==> 5  4
// sum ==> 6  5



// ==========================情况2
// 监视ref所定义的多个响应式数据
<template>
  <div>总合：{{ sum }}<button @click="sum++">点击累加</button></div>
  <hr />
  <div>
    msg：{{ msg }}
    <button @click="msg += '~'">改变msg</button>
  </div>
</template>
<script>
import { ref, watch } from "vue";
export default {
  setup() {
    let sum = ref(0);
    let msg = ref("watch使用"):
    // 情况2：监视ref所定义的多个响应式数据
    watch([sum, msg], (newValue, oldValue) => {
      console.log("sum/msg ==> ", newValue, oldValue);
    },{immediate:true});
    return {
      sum,
      msg,
    };
  },
};
</script>



// ===========================情况3
// 监视reactive所定义的一个响应式数据
// 注意：

// 这里无法正确获取oldValue
// 强制开启了深度监听（deep配置不生效）
<template>
  <div>
     <h3>情况3：:监视reactive所定义的一个响应式数据</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>
<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
        // 情况3、监视reactive所定义的一个响应式数据
    /* 
      若watch监视的是reactive定义的响应式数据，则无法正确获得oldvalue! 
      若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
    */
    watch(person,(newValue, oldValue) => {
        console.log("person ==> ", newValue, oldValue);
      },{immediate:true,deep:false}//这里的deep配置不再奏效
    );
    return {
      person,
    };
  },
};
</script>


// ======================情况4
// 监视reactive所定义的一个响应式数据中的某个属性

<template>
  <div>
     <h3>情况4：:监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况4、监视reactive所定义的一个响应式数据中的某个属性
    watch(()=>person.name,(newValue, oldValue) => {
        console.log("person.name ==> ", newValue, oldValue);
      });

    return {
      person,
    };
  },
};
</script>



// ================情况5
// 监视reactive所定义的一个响应式数据中的某些属性

<template>
  <div>
     <h3>情况4：:监视reactive所定义的一个响应式数据中的某个属性</h3>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 情况5、监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue, oldValue) => {
        console.log("person.name/person.age ==> ", newValue, oldValue);
    });
    return {
      person,
    };
  },
};
</script>


// =================特殊情况
// watch监听reactive中对象的嵌套对象

<template>
  <div>
      <div>姓名：{{person.name}}</div>
      <div>年龄：{{person.age}}</div>
      <div>薪资：{{person.job.joblist.money}} K</div>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age ++">修改年龄</button>
    <button @click="person.job.joblist.money ++">提薪</button>
  </div>
 </template>

<script>
import { ref, watch,reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "lisa",
      age: 18,
      job: {
        joblist: {
          money: 10,
        },
      },
    });
    // 特殊情况、监视reactive所定义嵌套对象
    watch(()=>person.job,(newValue, oldValue) => {
        console.log("person.job对象发生变化 ==> ", newValue, oldValue);
    },{deep:true});//此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

    return {
      person,
    };
  },
};
</script>

[9.2 清除监视]

在 setup() 函数内创建的 watch 监视，会在当前组件被销毁的时候自动停止。如果想要明确地停止某个监视，可以调用 watch() 函数的返回值即可，语法如下：

// 创建监视，并得到 停止函数
const stop = watch(() => {
  /* ... */
})
​
// 调用停止函数，清除对应的监视
stop()

[9.3 在 watch 中清除无效的异步任务]

有时候，当被 watch 监视的值发生变化时，或 watch 本身被 stop 之后，我们期望能够清除那些无效的异步任务，此时，watch 回调函数中提供了一个 cleanup registrator function 来执行清除的工作。这个清除函数会在如下情况下被调用：

  • watch 被重复执行了

  • watch 被强制 stop 了

Template 中的代码示例如下：

/* template 中的代码 */ <input type="text" v-model="keywords" />

Script 中的代码示例如下：

// 定义响应式数据 keywords
const keywords = ref('')

// 异步任务：打印用户输入的关键词
const asyncPrint = val => {
  // 延时 1 秒后打印
  return setTimeout(() => {
    console.log(val)
  }, 1000)
}

// 定义 watch 监听
watch(
  keywords,
  (keywords, prevKeywords, onCleanup) => {
    // 执行异步任务，并得到关闭异步任务的 timerId
    const timerId = asyncPrint(keywords)

    // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
    onCleanup(() => clearTimeout(timerId))
  },
  // watch 刚被创建的时候不执行
  { lazy: true }
)

// 把 template 中需要的数据 return 出去
return {
  keywords
}

work_fei
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model
看见小狮子没
09-20 7661
这是父组件的name：{{obj.name}}
③Vue3 Composition API（setup函数）
一个努力学习的程序猿
11-03 7583
Vue3 setup 函数相关使用
props的几种写法——defineProps定义props、toRefs接收props、computed中get和set写法、watch深度监听immediate-true
最新发布
weixin_44867717的博客
05-15 793
script>//写法一Reply},data() {return{replys:''},methods: {//写法二props: {id: {},},width: {},data() {return{replys:''},methods: {</script>
【vue3】vue3在setup的render渲染函数中如何使用slots（插槽）？
qq_39576711的博客
04-19 9911
在setup中使用插槽，需要配合render渲染函数，先上代码。 子组件slotsTest.vue: <script lang="ts"> import { h,renderSlot,Slots,reactive } from "vue"; interface SetupContext { slots:Slots } interface Data { [key:string]:unknown } interface listData { id:number, te
Vue 3 中的插槽（Slots）用法
weixin_60895836的博客
07-28 1899
插槽（Slots）是 Vue 组件中一种非常有用的功能，用于在父组件中向子组件传递内容。Vue 3 引入了语法，使得组件的写法更加简洁和易读。在本篇博客中，我们将探讨在 Vue 3 中使用插槽的不同方式，包括默认插槽、具名插槽以及作用域插槽。
Vue3之setup参数介绍
老电影故事的博客
04-27 4195
正如在一个标准组件中所期望的那样，setup函数中的props是响应式的，当传入新的prop时，它将被更新。，所以setup()内部的this的行为与其他选项中的this完全不同。用途：当父组件传递数据给子组件时，子组件不通过props接收，那么父组件传递的数据就到了setup中的context的attrs属性。context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地对context使用ES6解构。是响应式的，你不能使用ES6解构，因为它会消除prop的响应式。
vue3-form-usage：使用vue3的表单用法
02-07
在Vue3中，表单处理相比于Vue2有了一些显著的变化，主要是由于Composition API的引入，使得组件的状态管理和逻辑更加模块化。以下是对“vue3-form-usage”这一主题的详细阐述： 1. **Composition API**: Vue3引入了...
vue3中router和store详细使用教程方法vuex和route.zip
04-24
app.use(Vuex, store) // 注意这里的用法变化，Vue3中使用第二个参数传入store app.mount('#app') ``` 在`store.js`中，你可以定义state、mutations、actions和getters： ```javascript export default new Vuex....
Vue.directive()的用法和实例详解
08-27
Vue.directive()的用法和实例详解 Vue.directive()是 Vue.js 中的一个重要功能，用于注册和使用自定义指令。自定义指令可以帮助开发者扩展 Vue.js 的功能，实现一些复杂的交互效果。在本文中，我们将详细介绍 Vue....
基于vue3+elementPlus的后台管理系统模板实现
03-03
2. **Teleport**：Vue3的新特性，允许将组件渲染到DOM树的任意位置，特别适用于解决弹窗、模态等需要插入到body元素下的场景，避免了嵌套组件导致的复杂性。 3. **Suspense**：Vue3新增的 Suspense 组件，用于处理...
vue中keep-alive的用法及问题描述
12-29
在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省...
vue3中的setup()函数详解
唯见青山不见君
11-29 9140
vue3中的setup()函数详解
Vue3 中插槽(slot)的用法
qq_52099965的博客
10-21 1377
Vue3 中插槽(slot)的用法
Vue3 手把手教你自定义组件——setup版
热门推荐
军火库
06-20 1万+
自定义组件，我们一般需要实现这几个点：刚开始尝试Vue 3的时候用的组合式API都是这样的写法 乍一看感觉不如原来的啊，什么逻辑都写到setup里面了，好臃肿的一个方法。但事实上，Vue 3在对响应式重新设计之后，让我们可以通过和方法来创建声明一个响应式变量，也就意味着我们很多逻辑可以不依赖this.data进行开发和编写，甚至一些响应式逻辑都可以多组件复用。在了解了这些点之后，即便我们可以将逻辑拆分独立，通过解构的方式导入setup中，让我们代码更加高内聚低耦合，但我们依然避免不了，复杂组件需要retur
Vue3 关于setup与自定义指令
沉淀，积累、进步
04-13 2472
setup语法糖以及自定义指令相关用法
Vue3 setup 封装公共组件（利用插槽、useSlots）
m0_74382023的博客
01-25 618
对下面的模块用一个组件实现，并且图1，还需要暴露出去一个事件（鼠标长按后，左右移动实现对右边input值的改变）供其使用.1.使用了useSlots来判断插槽的一个传入情况，根据你传入的插槽来判断前面和后面的v-col是否显示。props部分（我们通过props传递的属性来控制，最前面和后面V-COL的显示与隐藏）
详解Vue3中的插槽（slot）
一起学习
12-23 1万+
本文主要介绍Vue3中的插槽（slot）。
Vue3之script-setup全面解析
luoxiaonuan_hi的博客
03-14 2418
可能很多同学（包括我）刚上手 Vue 3.0 之后，都会觉得开发过程似乎变得更繁琐了，Vue 官方团队当然不会无视群众的呼声，如果你基于脚手架和 .vue 文件开发，那么可以享受到更高效率的开发体验。在阅读这篇文章之前，需要对 Vue 3.0 的单组件有一定的了解，如果还处于完全没有接触过的阶段，请先抽点时间阅读一章。WARNING本章节的部分方案属于实验性方案，或者是刚进入定稿阶段，所以在官网文档上还暂时看不到使用说明，期间可能还会有一些功能调整和 BUG 修复，请留意版本号说明。
Vue3+tsx开发语法详解
wuqing942274053的专栏
09-10 2189
很多组件库都使用了TSX的方式开发，主要因为其灵活性比较高，TSX和SFC开发的优缺点就不介绍了，这里主要说一下将SFC项目改造为TSX的过程。 安装JSX库 pnpm install @vitejs/plugin-vue-jsx -D 安装完之后在vite.config.ts进行插件使用，代码如下： import { defineConfig } from "vite";import vue from&nb
vue3watch用法举例
07-11
你还可以传递一个可选的第二个参数来指定额外的选项，例如： ```javascript watch( count, (newCount, oldCount) => { console.log(`count 的值从 ${oldCount} 变为 ${newCount}`); }, { immediate: true } //...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值