vue3.0 ref

红太狼 2021-07-24 12:10 477阅读 0赞

让数据变成响应式,即改变会引发视图层的变化
    ref通过给value属性设置setter和getter实现数据劫持
    
    使用
    	import { ref } from 'vue'
    	
    	setup(){
    		const xx =ref(初始值)   无初始值设置为null,返回一个Ref对象,即reference引用对象
    			如果传入/.value赋值的是对象,将自动调用reactive方法进行深层响应转换,在模板中需要{
       {xx.属性}}调用,不需要xx.value.属性		
    			
    		
    		
    		(1)调用
    			xx.value
    			
    		(2)自动解套(即不需要xx.value获取值)
    			1、在setup的return{xx}中,在template中直接{
       {xx}},模板会自动加上.value
    			
    			2、在reactive定义的对象属性中
    				const x=ref(xx) 
    				const xxx=reactive({x})
    				xxx.x调用
    				
    			3、通过reactive对象调用属性赋值ref的形式,也会自动解套
    				const xx=reactive({x})
    				xx.x=ref(xxx)
    				xx.x直接调用
    		
    		(2.5)和reactive代理对象的源属性连接
    			当ref(reactive属性),返回的内容和源属性无连接,即修改不影响reactive代理的属性
    			但使用toRef(reactive,属性),返回的内容会保持对其源 property 的响应式连接,即双方修改都会相互影响
    				
    		(3)获取dom的ref
    			当使用组合式 API 时,reactive refs 和 template refs 的概念已经是统一的
    				setup(){
    					let x=ref(null);
    					
    					获取dom,必须在组件挂载后才能获得
    						onMounted(()=>{
    							x.value
    						})
    					
    					return{
    						x
    					}
    				}
    			在template中
    				<标签 ref='x'></标签>
    				
    		(4)使用模板语法遍历获取dom
    		
    			 template中:
    				 <li v-for='(item,index) in 3' :key=index :ref="el=>{divs[index]=el}">
    			          {
       {item}}
    			      </li>
    			      
    			 setup中:
    				const divs = ref([])
    				组件挂载后,即能通过divs.value获取遍历元素的所有dom
    				return{
    					divs
    				}
    	}
    
    类型声明:
    	Ref对象:
    		interface Ref<T> {
    		  value: T
    		}
    	ref函数:
    		function ref<T>(value: T): Ref<T>
    类型约束:
    	const foo = ref<string | number>('foo')
    	未知类型:
    	function useState<T>(initial: T) {
    	  const state = ref(initial) as Ref<T> 
    	  return state
    	}

代码示例:

<template>
      <div>
          <img src="./logo.png">
        <h1>Hello Vue 3!</h1>
        { { name}}
        <button @click="inc">Clicked { {  count }} times.</button>
    		
    	<ul>
          <li v-for='(item,index) in 3' :key=index :ref="el=>{divs[index]=el}">
              { { item}}
          </li>
        </ul>
        
      </div>
    
    </template>
    
    <script>
    import {  ref,reactive } from 'vue'
    
    export default { 
      setup() { 
        let count = ref(0)
        let name = ref('jeff')
    
        let msg=reactive({ count})
    	const divs = ref([])
    	
    	onMounted(()=>{ 
          console.log(divs.value[0])
        })
        
        const inc = () => { 
          count.value++
          console.log(msg.count); //在reactive对象中,会被自动解套
    
          msg.count=name;
          console.log(msg.count) //通过reactive对象调用属性赋值ref的形式,也会自动解套
    
    
        }
    
        return { 
          count,
          inc,
          name, //在setup返回对象中自动解套
          divs
        }
      }
    }
    </script>
    
    <style scoped>
    img { 
      width: 200px;
    }
    h1 { 
      font-family: Arial, Helvetica, sans-serif;
    }
    </style>