精华内容
下载资源
问答
  • <!... <...Vue 测试实例-数组更新 </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{sites}} <button @

    Vue3通过proxy,真正彻底实现了数据的响应式,所以对于data()里面的数据,只要更改就能自动更新视图。哪怕是数组增加或者对象增加属性,也能监测,无需像vue2一样去用push等。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例-数组更新 </title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="app">
      {{sites}}
      <button @click="hhh()">&nbsp;&nbsp;&nbsp;&nbsp;</button>
      {{myHobbies}}
      <button @click="jjj">&nbsp;&nbsp;&nbsp;&nbsp;</button><!-- 无效,显示未渲染 -->
    </div>
     
    <script>
    	const Site = {
    		
    		data() {			
    			return {
    			  sites: {'af':1,'bf':'hhh'}
    			}
    		},
    	    setup() {
    			const myHobbies =  Vue.reactive({
    				'af':1,
    				'bf':'hhh'
    			});
    			function jjj(){
    			   myHobbies['af'] = 2;
    			  }
    			return {
    				myHobbies // 导出响应式数组
    			}
    		},
    		mounted() {
    			console.log(this.myHobbies); // 是一个proxy
    			console.log(this.sites); // 是一个proxy
    			this.myHobbies['bf'] = 'sing'; // 视图更新
    			this.sites['bf'] = 'sing'; // 视图更新
    		},
    	
    		methods:{
    			hhh:function(){
    				console.log(this.sites);
    				this.sites['af']=2;
    		    }
    		}
    	}
    	 
    	const app = Vue.createApp(Site);
    	 
    	// app.component('site-info', {
    	//   props: ['id','title'],
    	//   template: `<h4>{{ id }} - {{ title }}</h4>`
    	// })
    	 
    	app.mount('#app');
    </script>
    </body>
    </html>
    

    深入理解Vue的数据响应式

    vue3-setup-基本使用-理解它的作用

    ps:script里面使用import会报错
    在这里插入图片描述
    在这里插入图片描述
    加上:
    在这里插入图片描述
    依然没用
    在这里插入图片描述

    是什么原因?import怎么用?

    最后只能用下面的方法:

    在这里插入图片描述

    展开全文
  • 但是再完成这个小demo的时候遇到了一点常见的坑,所以分享出来,希望刚刚学习vue3的小伙伴一点帮助 1.路由跳转 正常的路由跳转是需要进行以下几步的 第一步: 引入 useRouter import { useRouter } from 'vue-...

    最近学习Vue3的时候,利用业余时间做了一个简单的ToDoList来进行练习,效果如下:
    在这里插入图片描述

    但是再完成这个小demo的时候遇到了一点常见的坑,所以分享出来,希望给刚刚学习vue3的小伙伴一点帮助

    1.路由跳转

    正常的路由跳转是需要进行以下几步的
    第一步: 引入 useRouter

    import { useRouter } from 'vue-router'
    

    第二步: 实例化路由方法

    const router = useRouter()
    

    第三步: 使用跳转

     router.push('/Login') //无参数
     router.push({ path: '/Login', query: { id: 1 } }) //有参数
    

    踩坑点: 但是完成了之后,打印出来router,显示router未定义,是undefind

    原因: 将第二步的router在局部作用域中执行了,因为不知名原因,router要在全局来进行赋值
    代码如下:

        setup () {
            const title = ref('Hello Vue!')
            const router = useRouter() //router应该在此处赋值,而不能再goLogin方法里赋值
            function goLogin () {
                // const router = useRouter()
                router.push({ path: '/Login', query: { id: 1 } })
            }
            return { title, goLogin }
        },
    

    2.数组二次赋值

    **踩坑点:**清空数组,然后再重新给数组赋值的时候,发现数组变化了页面没有响应

    代码如下:

     underwayList = [];
     derwayList = [];
    

    错误点1:重新赋值之后两个数组已经不再是响应数据了,因为没有进行 reactive 包裹起来

    修正后代码如下:

    underwayList = reactive([]);
    derwayList = reactive([]);
    

    错误点2:虽然重新代理了,但是这个数组已经不是页面上的数组,也就不是setup返回出去的那个,通俗来说就是你大爷已经不是你大爷了

    正确代码如下:

    //方案一:
    underwayList.splice(0, underwayList.length);
    derwayList.splice(0, derwayList.length);
    
    //方案二:
    underwayList.length = 0;
    derwayList.length = 0;
    

    两种方法都行,原理是不改变数组的内存地址的情况下来对数组进行一个清空

    以上就是个人踩的一点小坑,希望对你有帮助

    展开全文
  • vue3的使用 <template> <div id="one"> <img src="http://127.0.0.1:9000/upload/001.png" alt="" /> <h1>Hello 蒸汽鸭</h1> <h1>{{ text }}</h1> <!-- 使用双花...

    vue3的使用

    <template>
      <div id="one">
        <img src="http://127.0.0.1:9000/upload/001.png" alt="" />
        <h1>Hello 蒸汽鸭</h1>
        <h1>{{ text }}</h1>
        <!-- 使用双花括号来变量括起来,进行渲染,定义的变量在下面 -->
      </div>
    </template>
    
    <script>
      //axios导入,导入后一定要使用,不然抛出异常
      import axios from 'axios';
      //导入{ref} 可以使定义的常量的字符串变成可变量
      import {ref} from 'vue';
      export default {
        //vue3的setup()函数,执行的顺序在vue页面中排第一
        //setup(props)函数,中的props是用于父子组件之间用于传参的一个参数
        //setup()函数中可以通过return来返回一个对象,这个对象可以用于页面的数据绑定
        //和data()函数的区别,data()函数只能返回一个字符串
        //setup()函数可以返回一个函数对象,把function xxx()函数赋值给text变量
        setup(){
          //const为定义常量,javascript中 const的常量是不可变的
          //使用ref('')函数来定义一个可响应式的字符串
          const text =ref('')
          function getA() {
            axios({
              method:'get',
              url: 'http://127.0.0.1:9000/api/'
            }).then((res)=>{
                console.log(res)
                //因为上方定义了text为const常量类型,所以不需要使用this.text
                //使用了{ref}需要使用代理模式,给常量的值赋值
                text.value = res.data.data
            })
          }
          //上面的函数 getA()只是定义了,但是没有执行
          //那么就执行一下getA()函数
          getA()
          //下方这个return将会把上方定义的常量返回给页面中的数据绑定
          return{
            text:text,
          }
        }
    }
    </script>
    <style>
    
    #one {
      width: 300px;
      height: 200px;
      box-shadow: 0 2px 12px 0 #00000060;
      margin: 0 auto;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • vue3中setup()函数的使用一

    千次阅读 2021-07-02 11:23:15
    export default { //vue3setup()函数,执行的顺序在vue页面排第一 //setup(props)函数,的props是用于父子组件之间用于传参的一个参数 //setup()函数可以通过return来返回一个对象,这个对象可以用于页面的...
    <template>
      <div id="one">
        <img src="http://127.0.0.1:9000/upload/001.png" alt="">
        <h1>Hello World</h1>
        <h1>{{ text }}</h1>
    <!-- 使用双花括号来变量括起来,进行渲染,定义的变量在下面 -->
      </div>
    </template>
    
    <script>
      //axios导入,导入后一定要使用,不然抛出异常
      //import axios from 'axios';
      export default {
        //vue3的setup()函数,执行的顺序在vue页面中排第一
        //setup(props)函数,中的props是用于父子组件之间用于传参的一个参数
        //setup()函数中可以通过return来返回一个对象,这个对象可以用于页面的数据绑定
        //和data()函数的区别,data()函数只能返回一个字符串
        //setup()函数可以返回一个函数对象,把function xxx()函数赋值给text变量
        setup(){
          function getA(){
            return "getA()函数中返回的字符串"
          }
          return{
            //直接在这里给变量text赋值,可以在页面数据绑定中使用,赋值的内容为一个函数对象
            text:getA(),
          }
        }
    }
    </script>
    <style>
    #one {
      width: 300px;
      height:200px;
      box-shadow: 0 2px 12px 0 #00000060;
      margin: 0 auto;
    }
    </style>
    

    在这里插入图片描述

    展开全文
  • 最近刚开始用vue3啊,真是一坑未平又遇到一坑,记录一下。 setup()定义了info let info: any = {} 然后调用接口后拿到数据,赋值给info,结果在这方法里输出是可以看到我们拿到值了,但视图上还是木有同步,不仅...
  • 1.父组件引用defineAsyncComponent import { defineAsyncComponent } from 'vue' components: { AsyncComponent: defineAsyncComponent(() => import('./components/AsyncComponent.vue') ) } }) 加载...
  • vue3.0 Composition API 上手初体验 神奇的 setup 函数 (二) 响应对象数据的绑定 上文中,我们已经了解普通响应数据的绑定了。但是,那只是普通数据,我们在实际开发,用到的对象数据是最多的。这一讲,我们就来讲...
  • vue3 setup

    2021-09-18 16:58:55
    setup 的运用和其意义 reactive, 创建一个响应式数据 ref, 用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI ref和reactice的最大区别是 ref 返回的是{value: xxx} computed, 计算属性 有缓存 ...
  • vue3.0我们setup是可以定义一个变量,然后return发送出来,页面用{{}}直接获取,但是我们请求后台获取数据以后是需要改我们初始化定义的字段的,这种情况下应该怎么做呢,这里分享下我的经验 目录 1、分享源码...
  • Vue3中setup前加上async后页面不显示

    千次阅读 2021-02-16 11:01:03
    问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白...解决: 在Vue3中,如果当前组件的setup使用了async/await,那么其调用组件的父组件的外层需要嵌套一个suspense标签,例如: 异步组件
  • 大家好,我是 漫步,Vue3出来许久了,对于Setup你熟悉吗?一起来看看这篇文章,喜欢记得关注我并设为星标。一、前言昨天讲了什么是组合式API,马上都2202年了你还不知道什么是Vue...
  • vue3 setup(详细)使用教程

    千次阅读 2021-08-17 14:15:57
    文章目录vue3 setup(详细)使用教程1:为什么使用setup2:创建vue3项目3:在组件编写setup方法4:setup生命周期4.1:执行时机4.2:setup 包含的生命周期5:setup使用ref对数据进行响应式绑定6:setup使用watch和...
  • vue3setup的使用理解

    千次阅读 多人点赞 2021-03-13 13:18:52
    1、vue3中setup有什么用? setup的设计是为了使用组合式api 2、为什么不用之前的组件的选项 data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而,当我们的组件变得更大时,逻辑关注点的列表也会...
  • Vue3源码之setup

    2021-07-18 22:02:58
    区别于Vue2使用选项组织代码,组合式实际上是对在setup中使用API这种方式的一种描述,如果你愿意实际上你可以在setup选项完成绝大多数的功能逻辑,例如注册生命周期、定义computed和watch等等。 本文旨在梳理...
  • vue3_setup

    2021-09-26 20:00:15
    setup两个参数, 第一个参数是上面经过props声明过后的父组件传递过来的数据(需要经过props声明) 第二个参数context包含三个常用的属性 1. attr, 该属性里保存的是父组件传递过来但props未声明的数据 2. emit, 即...
  • 由于没有仔细阅读vue3.0的官方文档,在ref()变量赋值的时候遇到了问题 众所周知,vue3.0增加了ref()、reactive()语法糖。 ref() 基础类型、数组 reactive() 对象 两者除了包裹的内容不同,在使用方法上也有一定...
  • vue3setup使用

    2021-11-11 10:01:27
    vue3setup使用 setup的设计是为了使用组合式apisetup位于created 和beforeCreated之前,用于代替created 和beforeCreated,但是在setup函数里不能访问到this,另外setup内可以通过以下hook操作整个生命周期...
  • setup 函数 ...vue3里的生命周期: ① 可以和vue2里一样选项式写法,和setup平级, beforeCreate/ created/ beforeMount/ mounted / beforeUpdate / updated / beforeUnmount / unmounted ② 可以在setup
  • setup语法没有this,如何将axios获取的响应数据赋值给setup里面的data变量,有没有人能够解答一下,我是想不出来了
  • vue3.0 中setup中 异步转同步

    千次阅读 2021-04-15 16:25:26
    Vue3中setup前加上async后页面不显示 **问题描述 **在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据。所以需要setup函数异步转同步,后设置了async 后异步转同步,...
  • setup作为Vue3的组合式API的重要特性,改变了之前OptionAPI的写代码方式,setup函数让Vue3对逻辑的封装更为简单,那么他又是在Vue3上如何挂载,如何访问的呢?我们接下来一起阅读源码,从源码深入了解setup函数。
  • 先来看在 Vue3 如何在模版语法使用ref(options语法获取ref和2.0版本语法无差异) <template> <div ref="divRef">ref demo</div> </template> <script> import { ref, onMounted...
  • vue3.0里数组赋值问题

    2021-01-06 14:44:14
    定义了一个数组 const tableData = reactive({ SourceData:[] }) 后台数据返回赋值成功:tableData.SourceData = data.whlist; 打印结果为: 将其赋值给table 但是无法显示数据
  • vue中把props的值赋值给data

    千次阅读 2021-01-22 18:10:37
    父组件 <messageForm @createMsgCallback="addCreateMsg" :name="sendForm.name"></messageForm> 子组件 props:{ name:{ type:String } }, computed: { computedName(){ ... .
  • VUE3(八)setup与ref函数

    千次阅读 2021-03-01 09:22:15
    SetupVUE3.0中为我们...1:Setup可以替代VUE2的data和method函数。 (1):使用VITE创建一个空项目,默认会我们一个helloworld组件,我们使用这个组件做测试。 项目搭建,请移步《VUE3(一)安装+使用vite创建一
  • 点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群一、前言昨天讲了什么是组合式API,\# 马上都2202年了你还不知道什么是Vue3的组合式API吗?[2]今天就来听我吹一吹vu...
  • vue3 setup踩坑

    2021-08-16 16:59:50
    vue3 setup踩坑 1.setup定义变量使用要ref(),要进行引用 import {ref} from 'vue' 注意ref放在{}里,否则会...3.setup的值渲染到vue上不生效,仔细检查过发现定义的bedId的值没有传给vue的原因是没有return bedId s
  • vue3 setup中使用对象数组 const state = reactive<DataProps>({ fileList:[] }) 如果更新数组对象属性会发现数据不会更新,比如 const newImgFile: ImgFile = { path:result, status: 'selected', ...
  • setup里面使用Axios 1.安装 在cmd先安装axios npm install --save axios vue-axios 2.main.js注册 在main.js引入后用app.config.globalProperties 注册全局方法 //main.js //引入 import Vue...
  • Vue3 Composition API(setup函数)

    千次阅读 多人点赞 2020-11-03 16:24:01
    Vue3Composition API介绍setup函数简单使用reactive的注意点ref的注意点递归监听和非递归监听toRefstoRefcustomRef参数props和contexttoRawreadonly 写下博客主要用来分享知识内容,并便于自我复习和总结。 如有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,586
精华内容 634
关键字:

vue3中setup给对象赋值

vue 订阅