kalvin_y_liu
kalvin_y_liu

Vue(ref和$refs属性介绍与使用)

一、 Vue(ref和$refs属性介绍与使用)

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容

除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开
常用的属性有：

常用的属性有：
	1：vm.$el   	//获取vue实例关联的Dom元素
	2: vm.$data 	//获取vue实例的data选项
	3：vm.$options	//获取vue实例的自定义属性
	4：vm.$refs		//获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。
	5: vm.$ref 		// ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例
		 ref加载普通元素上，this.$refs.  获取到的就是dom元素
		 ref记载在子组件上，this.$refs.  获取到的就是组件实例，可使用组件的所有方法。

ref有三种用法：

   ①ref加在普通的元素上，用this.ref.name获取到的是dom元素；

   ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法；

   ③如何利用v-for和ref获取一组数据或者dom节点。

   当v-for用于元素或者组件的时候，引用信息将是包含dom节点或组件实例的数组；

   关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候，你不能访问它们--它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

ref

ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。

ref作用

用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。
1、如果给普通的dom元素使用，引用指向的是dom元素。
2、如果是给子组件使用，引用指向的是子组件的实例。

注意：
1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。
2、微信小程序中给dom元素使用ref无效。得到的是 空对象.

$refs

$refs 是一个对象，持有已注册过 ref 的所有的子组件。

具体演示

1.基础代码

先来准备案例基础代码，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

2.普通DOM

2.1 普通方式

我们先通过 getElementById 方法来获取
  Vue(ref和$refs属性介绍与使用)_第1张图片

2.2 ref使用

接下来我们通过 ref 属性来试试。
  Vue(ref和$refs属性介绍与使用)_第2张图片

然后查看 vm 实例对象
  Vue(ref和$refs属性介绍与使用)_第3张图片

通过上面的演示我们发现 在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象
Vue(ref和$refs属性介绍与使用)_第4张图片
Vue(ref和$refs属性介绍与使用)_第5张图片

3.组件

ref 也可以作用在组件中，我们来看下效果

3.1 添加组件

先来添加一个自定义的组件
Vue(ref和$refs属性介绍与使用)_第6张图片
Vue(ref和$refs属性介绍与使用)_第7张图片
Vue(ref和$refs属性介绍与使用)_第8张图片
Vue(ref和$refs属性介绍与使用)_第9张图片

3.2 ref 使用

在 子组件中使用 ref属性，会将子组件添加到父组件的$refs对象中，如下
Vue(ref和$refs属性介绍与使用)_第10张图片
查看vm对象
Vue(ref和$refs属性介绍与使用)_第11张图片
通过 vm 实例查看 发现 $refs中绑定的有 我们的login组件，而且还看到了对应的 组件中的 msg属性和 show方法，那这样我们可以调用了，如下
Vue(ref和$refs属性介绍与使用)_第12张图片

3.5 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取h3的值" @click="getElement()">
        <h3 id="myh3" ref="myh3" >我是一个h3</h3>
        <hr>
        <login ref='mylogin'></login>
    </div>

    <script>

        var login = {
            template: "
我是login子组件
",
            data(){
                return {
                    msg: "ok"
                }
            },
            methods:{
                show(){
                    console.log("show方法执行了...")
                }
            }
        }

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                getElement(){
                    // 通过 getElementById 方式获取 DOM 对象
                    // console.log(document.getElementById("myh3").innerHTML)
                    // console.log(this.$refs.myh3.innerHTML)

                    console.log(this.$refs.mylogin.msg)
                    this.$refs.mylogin.show()
                }
            },
            components:{
                login
            }
        })
    </script>
</body>
</html>

二. vue中父子组件通过ref传值「dialog组件」

一个基于vue的项目，有可能会很多的组件，组件之间难免需要进行数据的传递，比如: 父组件 传数据 给子组件；子组件传数据给父组件等，需要用到组件之间的通信处理方式。
项目中经常用到element中的dialog组件，现记录父子组件通过ref传值。

操作流程：

1.父组件中点击按钮吊起子组件模态框dialog进行内容设置，并给子组件传递id

this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
      this.$refs.dialogRef.init(this.fatherId);    //获取子组件中init方法并将父组件id传递给子组件
 });

2.在子组件中需接收父组件传来的内容id并查询内容详情

init (val) {
      this.activityId = val   //接收父组件传递的id值
}

3.在子组件dialog中可以编辑内容，然后将数据通过$emit传递给父组件

this.$emit("setActivityBtn", this.SetForm);   //setActivityBtn为父组件接收的方法，将参数传给父组件

4.父组件接收数据后提交到服务器

setActivityBtn(data) { //获取子组件传来的值
     let params = data
 },

以下为父子组件全部代码

子组件Dialog

<script>
export default {
  name: '',
  data () {
    return {
      id: '',  //用来查询详情的id
      dialogFormVisible: false, //模态框
      SetForm: {   }, //模态框数据 
    }
  },
  methods: { 
     // 初始化方法
    init (val) {
      this.activityId = val   //接收父组件传递的值
      this.dialogFormVisible = true;
      this.getActivityInfo()
    },
    //获取内容详情
    getActivityInfo () {
   
    },
    //模态框确定按钮
    setActivityBtn () {
      this.$emit("setActivityBtn", this.SetForm);   //将参数传给父组件
      this.dialogFormVisible = false;
    },
}
</script>

父组件

<script>
import Dialog from '../components/Dialog'
export default {
  name: '',
  data () {
    return {
      fatherId:'',  //详情id
      dialogShow: false,  //模态框
    }
  },
components: { // 组件的引用
    Dialog
  },
  methods: { 
     //吊起模态框
    activitySet() {
      this.dialogShow= true;
      this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
        this.$refs.dialogRef.init(this.fatherId);     //获取子组件中init方法并将父组件id传递给子组件
      });
    },
    //确定按钮
    setActivityBtn(data) { //获取子组件传来的值
      let params = data
      XXXXXXXX(params).then(res => {
        if (res.data.code == 0) {
          this.dialogFormVisible = false
        }
      })
    },
}
</script>

吊起模态框

<script>
import Dialog from '../components/Dialog'
export default {
  name: '',
  data () {
    return {
      fatherId:'',  //详情id
      dialogShow: false,  //模态框
    }
  },
components: { // 组件的引用
    Dialog
  },
  methods: { 
     //吊起模态框
    activitySet() {
      this.dialogShow= true;
      this.$nextTick(() => {   //此函数执行时所有的DOM挂载和渲染都已完成
        this.$refs.dialogRef.init(this.fatherId);     //获取子组件中init方法并将父组件id传递给子组件
      });
    },
    //确定按钮
    setActivityBtn(data) { //获取子组件传来的值
      let params = data
      XXXXXXXX(params).then(res => {
        if (res.data.code == 0) {
          this.dialogFormVisible = false
        }
      })
    },
}
</script>

三.拓展

方式一、父子组件通过ref传值,然后在子组件中data函数直接return获得

父组件中：可以通过ref向子组件传值

this.$refs.dialogRef.name1=this.fatherName1  
this.$refs.dialogRef.name2=this.fatherName2

子组件中：可以通过数组的形式向父组件传递多个参数

this.$emit("setActivityBtn", [this.SetForm,this.dialogFormVisible]);

方式二.v-bind绑定，子组件中props接受，return中定义要改变传给父组件的属性：

父组件

<script>
     this.fatherName= this.detailData.name;
     this.fatherSalePrice= this.detailData.salePrice;
</script>

子组件

<script>
  export default {
       props: {
            sonName: {
                type:String,
                default:''
            },
            sonSalePrice: {
                type:Number,
                default:0
            },
        },
        data:function () {
            return {
                cartName:this.sonName,
                cartSalePrice:this.sonSalePrice
            }
        },
        methods: {
            addCart() {
                this.$emit('confirmAddCart',[this.cartName,this.cartSalePrice]);
            }
        }
  }
</script>

注：vue的思想是数据驱动视图，所以尽量少的用直接操作dom，当然一些需要获取元素宽高等场景时也会用到$refs
事件驱动

四 vue的思想是数据驱动视图

在前端来说数据驱动式框架，必然离不开事件驱动，事件驱动一定程度上弥补了数据驱动的不足，在dom操作的时代通常都是这样操作：
通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听
响应用户操作，效果是这样：
用户执行某事件（点击，输入，后退等等） -> 调用 JavaScript 来修改节点
这种模式对业务来说是没有什么问题，但是从开发成本和效率来说会比较力不从心，在业务系统越来越庞大的时候，就显得复杂了。另一方面，找节点和修改节点这件事，效率本身就很低，因此出现了数据驱动模式。

数据驱动

读取模板，同时获得数据，并建立 VM( view-model ) 的抽象层 -> 在页面进行填充
要注意的是，MVVM 对应了三个层，M - Model，可以简单的理解为数据层；V - View，可以理解为视图，或者网页界面；VM - ViewModel，一个抽象层，简单来说可以认为是 V 层中抽象出的数据对象，并且可以与V 和 M 双向互动（一般实现是基于双向绑定，双向绑定的处理方式在不同框架中不尽相同）。
用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据

Vue 模式

Vue 通过{{}}绑定文本节点，data里动态数据与Props静态数据进行一个映射关系，当data中的属性或者props中的属性有变动，以上两者里的每个数据都是行为操作需要的数据或者模板 view 需要渲染的数据，一旦其中一个属性发生变化，则所有关联的行为操作和数据渲染的模板上的数据同一时间进行同步变化，这种基于数据驱动的模式更简便于大型应用开发。只要合理的组织数据和代码，就不会显得后续皮软。

何为动态数据 data，何为静态数据 props

  • 相同点

两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。

  • 不同点

Data 被称之为动态数据的原因，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。

Props 被称之为静态数据的原因，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型。

更为关键地是，对数据单向流的理解，props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。

  • data 选项

当一个实例创建的时候，Vue会将其响应系统的数据放在data选项中，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。初始定行的行为代码也都会随着响应系统进行一个映射。

而 data 选项中的数据在实例中可以任意改变，不受任何影响，前提必须数据要跟逻辑相辅相成。

  • 初始化映射
<template>
   <div>
      <p v-if='boolean'>true</p>
      <p v-for='value in obj'>{{value}}</p>
      <p v-for='item in list'>{{item}}</p>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          obj : {a:'1',b:'2',c:'3'},
          list:['a','b','c'],
          boolean : true,
          StringMsg : 'hello vue',
          NumberMsg : 2.4,
       }
     }
   }
</script>

运行代码时，在data选项里定义了五种数据类型，通过指令和{{}}进行渲染，证实了data选项里可以定义任何数据类型。

  • 视图与数据映射
<template>
   <div>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
      <button @click='changeData'>改变数据</button>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          StringMsg : 'hello vue',
          NumberMsg : 2.4
       }
     },
     methods: {
       changeData () {
         this.StringMsg = 2.4;
         this. NumberMsg = 'hello vue'
       }
     }
   }
</script>

每个.vue 的文件则就是一个实例，在 data 中定义了两种数据：

String 类型
Number 类型
同时还定义了一个 changeData 事件。

在运行代码时候，data选项已经进入了Vue的响应系统里，model层(数据层)与view层(视图层)进行了对应的映射，任何数据类型都可以定义。

当用户发生点击操作的时候，同时可以把 StringMsg， NumberMsg 的数据对调，充分说明了，无论值和类形都可以进行随意转换。

  • 行为与数据的映射
<template>
   <div>
      <p>{{StringMsg}}</p>
      <p>{{NumberMsg}}</p>
      <button @click='changeData'>改变数据</button>
      <button @click='findData'>查看数据</button>
   </div>
</template>
<script>
   export default {
     data () {
       return  {
          StringMsg : 'hello vue',
          NumberMsg : 2.4
       }
     },
     methods: {
       changeData () {
         this.StringMsg = 2.4;
         this.NumberMsg = 'hello vue'
       },
       findData () {
         console.log(`StringMsg: ${this.StringMsg}`)
         console.log(`NumberMsg: ${this.NumberMsg}`)
       }
     }
   }
</script>

改变数据以后，通过点击 findData 事件来进行验证，虽然在初始化定义好了行为数据的检测代码，但是当数据在执行 findData 之前先执行 changeData，一旦改变 data 选项里的数据时，findData 里对应的数据同时也会进行相应的映射。

this.StringMsg //=> 2.4

this.NumberMsg //=>‘hello vue’

五 、总结：

  1. data 选项里的数据是灵活的
  2. 可以定义任何数据类型
  3. 也可以改变成任何数据类型
  4. 当数据变化时，视图和行为绑定的数据都会同步改变

props

  1. 使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。
  2. 子组件需要显示的声明接收父组件传递来的数据的数量，类型，初始值。
  3. 简单的接收可以通过数组的形式来进行接收。

父组件

<template>
   <div>
      <demo :msg='msgData' :math = 'mathData' ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     data () {
       return  {
          msgData:'从父组件接收来的数据',
          mathData : 2
       }
     },
     components : {
       Demo
     }
   }
</script>

子组件

<template>
  <div>
     <p>{{msg}}</p>
     <p>{{math}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: [ 'msg' , 'math'],
}
</script>

在子组件中需要通过显示定义好需要从父组件中接收那些数据。

同样的在父组件中在子组件模板中过v-bind来传递子组件中需要显示接收的数据。

语法： ：== v-bind(是封装的语法糖) ：msg = msgData

msg 第一个参数必须要与子组件的 props 同名
msgData 则是父组件中需要向子组传递的数据
props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。

父组件

<template>
   <div>
      <demo :fn = 'myFunction'  ></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     components : {
       Demo
     },
     methods: {
       myFunction () {
           console.log('vue')
       }
     }
   }
</script>

六 、为什么会出现MVVM?

1. 首先解释：MVVM是什么？干什么用的？

1：MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

2：其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

3：以Vue.js 为例。Vue是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。

4：它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发
更加高效、便捷。

Vue(ref和$refs属性介绍与使用)_第13张图片

  • Model - 模型、数据
  • View - 视图、模板（视图和模型是分离的）
  • ViewModel - 连接 Model 和 View
    Vue(ref和$refs属性介绍与使用)_第14张图片

本文来源：码农网
本文链接：https://www.codercto.com/a/33262.html

2.为什么会出现MVVM? 框架的发展？ MVC----MVP----MVVM

1:最初是MVC:MVC是一种架构模式，M表示Model，V表示视图View，C表示控制器Controller
		    就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的
		    
2:在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是OK 的.

3:这是因为 Web 应用的View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好

4:View 层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的业务逻辑，所以View 层相对来说比较轻量，就是所谓的瘦客户端思想。

Vue(ref和$refs属性介绍与使用)_第15张图片

1、 开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

3、 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样
的工作不仅繁琐，而且很难维护复杂多变的数据状态。

MVVM的出现完美的解决了上面的几个问题：

1：MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负
责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

2：在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数
据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
3：ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发
者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

3. Vue.js与MVVM的关系？

Vue.js 可以说是MVVM 架构的最佳实践，VUE并没有完全遵循MVVM，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS 库，API 简洁，很容易上手。

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

Vue(ref和$refs属性介绍与使用)_第16张图片
Vue(ref和$refs属性介绍与使用)_第17张图片

3.1 关于 ViewModel

MVVM ViewModel
Vue(ref和$refs属性介绍与使用)_第18张图片

v-model用于表单数据的双向绑定

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

    1. v-bind绑定一个value属性
    1. v-on指令给当前元素绑定input事件

自定义组件使用v-model，应该有以下操作：

  • 接收一个value prop
  • 触发input事件，并传入新值

在原生表单元素中：

<input v-model="inputValue">

相当于

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中

<my-component v-model="inputValue"></my-component>

相当于

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input', value)

3.2 MVVM 框架的三大要素

  • 响应式： vue 如何监听到 data 的每个属性变化？
  • 模板引擎： vue 的模板如何被解析，指令如何处理？
  • 渲染： vue 的模板如何被渲染成 html ？以及渲染过程

3.3 vue 中如何实现响应式

3.3.1 什么是响应式

修改 data 属性之后，vue 立刻监听到
data 属性被代理到 vm 上

Vue(ref和$refs属性介绍与使用)_第19张图片

3.3.1 .2 Object.defineProperty

Vue(ref和$refs属性介绍与使用)_第20张图片

3.3.1 .3 模拟实现

Vue(ref和$refs属性介绍与使用)_第21张图片

Vue(ref和$refs属性介绍与使用)_第22张图片

4. vue 中如何解析模板

4.1 模板是什么
  • 本质：字符串
  • 有逻辑，如 v-if v-for 等
  • 与 html 格式很像，但有很大区别
  • 最终还要转换为 html 来显示

模板最终必须转换成 JS 代码，因为

  • 有逻辑（ v-if v-for ），必须用 JS 才能实现
  • 转换为 html 渲染页面，必须用 JS 才能实现
  • 因此，模板最重要转换成一个 JS 函数（ render 函数）

Vue(ref和$refs属性介绍与使用)_第23张图片

4.2 render 函数
  • 模板中所有信息都包含在了 render 函数中
  • this 即 vm
  • price 即 this.price 即 vm.price ，即 data 中的 price
  • _c 即 this._c 即 vm._c

Vue(ref和$refs属性介绍与使用)_第24张图片

Vue(ref和$refs属性介绍与使用)_第25张图片
Vue(ref和$refs属性介绍与使用)_第26张图片

4.3 render 函数与 vdom
  • vm._c 其实就相当于 snabbdom 中的 h 函数
  • render 函数执行之后，返回的是 vnode

Vue(ref和$refs属性介绍与使用)_第27张图片
Vue(ref和$refs属性介绍与使用)_第28张图片

  • updateComponent 中实现了 vdom 的 patch
  • 页面首次渲染执行 updateComponent
  • data 中每次修改属性，执行 updateComponent

五、vue 的整个实现流程

  • 第一步：解析模板成 render 函数
  • 第二步：响应式开始监听
  • 第三步：首次渲染，显示页面，且绑定依赖
  • 第四步： data 属性变化，触发 rerender

Vue(ref和$refs属性介绍与使用)_第29张图片

5.1 第一步：解析模板成 render 函数

Vue(ref和$refs属性介绍与使用)_第30张图片

Vue(ref和$refs属性介绍与使用)_第31张图片

  • 模板中的所有信息都被 render 函数包含
  • 模板中用到的 data 中的属性，都变成了 JS 变量
  • 模板中的 v-model v-for v-on 都变成了 JS 逻辑
  • render 函数返回 vnode
5.2 第二步：响应式开始监听
  • Object.defineProperty
  • 将 data 的属性代理到 vm 上

Vue(ref和$refs属性介绍与使用)_第32张图片

5.3 第三步：首次渲染，显示页面，且绑定依赖
  • 初次渲染，执行 updateComponent ，执行 vm._render()
  • 执行 render 函数，会访问到 vm.list vm.title
  • 会被响应式的 get 方法监听到
  • 执行 updateComponent ，会走到 vdom 的 patch 方法
  • patch 将 vnode 渲染成 DOM ，初次渲染完成

Vue(ref和$refs属性介绍与使用)_第33张图片
Vue(ref和$refs属性介绍与使用)_第34张图片

为何要监听 get ，直接监听 set 不行吗？

  • data 中有很多属性，有些被用到，有些可能不被用到
  • 被用到的会走到 get ，不被用到的不会走到 get
  • 未走到 get 中的属性， set 的时候我们也无需关心
  • 避免不必要的重复渲染

Vue(ref和$refs属性介绍与使用)_第35张图片

https://www.codercto.com/a/33262.html
前端面试之MVVM浅析

本文来源：码农网
本文链接：https://www.codercto.com/a/33262.html

超详细VUE专栏

你可能感兴趣的:(vue系列,vue.js,javascript,前端)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 插入表主键冲突做更新 a-john
    有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语
  • Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@*
    一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red"
  • 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签
    数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a
  • 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api
     现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs
  • ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage
    package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon
  • myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse
                                     &n
  • 装箱与拆箱----autoboxing和unboxing darkranger J2SE
    4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object)
  • ajax传统的方式制作ajax aijuans Ajax
    //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+
  • 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat
    eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb
  • 前端模块化 bee1314 模块化
    背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所
  • 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询
    一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o
  • mac 卸载 java 1.7 或更高版本 征客丶 javaOS
    卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java
  • 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream
    第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f
  • Erlang vs TNSDL bookjovi erlang
          TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发，
  • 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用
    　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁
  • 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi
  • 配置管理---svn工具之权限配置 chenyu19891124 SVN
    今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups]
  • 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘
                                     浅谈程序员的数学修养
  • 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall
    BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F
  • Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS
    1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。
  • Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate
    Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError  
  • 基于vagrant的redis主从实验 dcj3sjt126com vagrant
    平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_
  • Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached
    一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head
  • Remove Duplicates from Sorted List hcx2013 remove
    Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return&
  • Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • 浅谈enum与单例设计模式 247687009 java单例
    在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S
  • 使用switch条件语句需要注意的几点 openwrt cbreakswitch
    1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa
  • 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit
    Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：    
  • Java 定时任务总结一 tuoni javaspringtimerquartztimertask
     Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 &
  • 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度
    本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他