vue的可复用性和组合

  1. 云栖社区>
  2. 博客>
  3. 正文

vue的可复用性和组合

webmirror 2017-09-14 18:23:03 浏览4999
展开阅读全文

混合

基础

混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。例如:

var myMixin = { // 定义一个混合对象
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
var Component = Vue.extend({ // 定义一个使用混合对象的组件
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

选项合并

当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如,同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用:

var mixin = {
  created: function () {
    console.log('混合对象的钩子被调用')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

值为对象的选项,例如methods, components和directives,将被混合为同一个对象。两个对象键名冲突时取组件对象的键值对

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}
var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

注意:Vue.extend()也使用同样的策略进行合并

全局混合

也可以全局注册混合对象。 注意使用!一旦使用全局混合对象,将会影响到所有之后创建的Vue实例。使用恰当时可以为自定义对象注入处理逻辑

Vue.mixin({ // 为自定义选项 'myOption' 注入一个处理器
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
}) // => "hello!"

谨慎使用全局混合对象,因为会影响到每个单独创建的Vue实例(包括第三方模板)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。也可以将其用作Plugins以避免产生重复应用

自定义选项合并策略

自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向Vue.config.optionMergeStrategies添加一个函数:

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

对于大多数对象选项,可以使用methods的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

更多高级的例子可以在 Vuex 的 1.x 混合策略里找到:

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}

自定义指令

简介

除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。注意:在Vue2.0里,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令,例如聚焦一个input元素。页面加载时,元素将获得焦点(注意:autofocus在移动版Safari上不工作)。事实上,访问后还没点击任何内容input就获得了焦点。现在让我们完善这个指令:

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function(toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}

也可以注册局部指令,组件中接受一个directives的选项:

directives: {
  focus: {
    // 指令的定义---
  }
}

然后你可以在模板中任何元素上使用新的v-focus属性:

<input v-focus>

钩子函数

指令定义函数提供了几个钩子函数(可选):

1.bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

2.inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)

3.update: 所在组件的VNode更新时调用,但是可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

4.componentUpdated: 所在组件的VNode及其孩子的VNode全部更新时调用

5.unbind: 只调用一次, 指令与元素解绑时调用

接下来我们来看一下钩子函数的参数 (包括 el,binding,vnode,oldVnode)

钩子函数参数

钩子函数被赋予了以下参数:

el: 指令所绑定的元素,可以用来直接操作DOM

binding: 一个对象,包含以下属性:

1.name: 指令名,不包括v-前缀。

2.value: 指令的绑定值,例如:v-my-directive="1+1", value的值是2

3.oldValue: 指令绑定的前一个值,仅在update和componentUpdated钩子中可用。无论值是否改变都可用

4.expression: 绑定值的字符串形式。 例如v-my-directive="1+1" , expression的值是"1+1"

5.arg: 传给指令的参数。例如v-my-directive:foo,arg的值是"foo"

6.modifiers: 一个包含修饰符的对象。例如v-my-directive.foo.bar,修饰符对象modifiers的值是{foo:true, bar:true}

7.vnode: Vue编译生成的虚拟节点,查阅VNode API了解更多详情

8.oldVnode: 上一个虚拟节点,仅在update和componentUpdated 子中可用

除el外,其它参数都应是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的dataset来进行

一个使用了这些参数的自定义钩子样例:

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
<script>
  Vue.directive('demo', {
    bind: function (el, binding, vnode) {
      var s = JSON.stringify
      el.innerHTML =
        'name: '       + s(binding.name) + '<br>' +
        'value: '      + s(binding.value) + '<br>' +
        'expression: ' + s(binding.expression) + '<br>' +
        'argument: '   + s(binding.arg) + '<br>' +
        'modifiers: '  + s(binding.modifiers) + '<br>' +
        'vnode keys: ' + Object.keys(vnode).join(', ')
    }
  })
  new Vue({
    el: '#hook-arguments-example',
    data: {
      message: 'hello!'
    }
  })
</script>

函数简写

大多数情况下,我们可能想在bind和update钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量

如果指令需要多个值,可以传入一个JS对象字面量。记住:指令函数能够接受所有合法类型的JavaScript表达式

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<script>
  Vue.directive('demo', function (el, binding) {
    console.log(binding.value.color) // => "white"
    console.log(binding.value.text)  // => "hello!"
  })
</script>

渲染函数 & JSX

基础

Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中,你真的需要JavaScript的完全编程的能力,这就是render函数,它比template更接近编译器

<h1>
  <a name="hello-world" href="#hello-world"> Hello world! </a>
</h1>

在 HTML 层,我们决定这样定义组件接口:

<anchored-heading :level="1">Hello world!</anchored-heading>

当我们开始写一个通过level prop动态生成heading标签的组件,你可能很快想到这样实现:

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1"> <slot></slot> </h1>
  <h2 v-else-if="level === 2"> <slot></slot> </h2>
  <h3 v-else-if="level === 3"> <slot></slot> </h3>
  <h4 v-else-if="level === 4"> <slot></slot> </h4>
  <h5 v-else-if="level === 5"> <slot></slot> </h5>
  <h6 v-else-if="level === 6"> <slot></slot> </h6>  
</script>
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

在这种场景中使用template并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,我们需要重复地使用。虽然模板在大多数组件中都非常好用,但在这里就不是很简洁的了。那么,我们来尝试使用render函数重写上面的例子:

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

这样代码精简很多,但是需要非常熟悉Vue的实例属性。在这个例子中,你需要知道当你不使用slot属性向组件中传递内容时,比如anchored-heading中的Hello world!,这些子元素被存储在组件实例中的$slots.default中

节点、树以及虚拟DOM

在深入渲染函数之前,了解一些浏览器的工作原理是很重要的。以下面这段HTML为例:

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

浏览器读到这些代码时,会建立一个“DOM节点”树来保持追踪,如同画一张家谱树来追踪家庭成员的发展一样

每个元素都是一个节点。每片文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)

高效的更新所有这些节点会是比较困难的,不过你不必再手动完成这个工作了。只需要告诉Vue希望页面上的HTML是什么,这可以是在一个模板里:

<h1>{{ blogTitle }}</h1>

或者一个渲染函数里:

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

两种情况下,Vue都会自动保持页面的更新,即便blogTitle发生了改变

虚拟DOM

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪。请近距离看一下这行代码:

return createElement('h1', this.blogTitle)

createElement到底会返回什么呢?其实不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription,因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点及其子节点。我们把这样的节点描述为“虚拟节点(Virtual DOM)”,也常简写它为“VNode”。“虚拟DOM”是我们对由Vue组件树建立起来的整个VNode树的称呼

createElement参数

接下来你需要熟悉的是如何在createElement函数中生成模板

深入data对象

正如在模板语法中,v-bind:class和v-bind:style会被特别对待一样,在VNode数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的HTML特性,就像DOM属性一样,比如innerHTML(这会取代v-html指令)

{
  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 `on`,所以不再支持如 `v-on:keyup.enter` 修饰器,需要手动匹配keyCode
  on: {
    click: this.clickHandler
  },
  // 仅对于组件,用于监听原生事件,而不是组件内部使用 `vm.$emit` 触发的事件
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意事项:不能对绑定的旧值设值;Vue会为您持续追踪
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件,需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

完整示例

有了这些知识,我们现在可以完成我们最开始想实现的组件:

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children ? getChildrenTextContent(node.children) : node.text
  }).join('')
}
Vue.component('anchored-heading', {
  render: function (createElement) {
    var headingId = getChildrenTextContent(this.$slots.default).toLowerCase().replace(/\W+/g, '-').replace(/(^\-|\-$)/g, '')
    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

约束

VNodes必须唯一:组件树中的所有VNodes必须是唯一的。这意味着,下面的render function是无效的:

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误-重复的 VNodes
    myParagraphVNode, myParagraphVNode
  ])
}

如果真的需要重复很多次的元素/组件,可以使用工厂函数来实现。例如,下面这个例子render函数完美有效地渲染了20个重复的段落:

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

使用js代替模板功能

v-if和v-for

由于使用原生的JavaScript来实现某些东西很简单,Vue的render函数没有提供专用的API。比如,template中的v-if和v-for:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

这些都会在render函数中被JavaScript的if/else和map重写:

render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

v-model

render函数中没有与v-model相应的api - 你必须自己来实现相应的逻辑:

render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.value = event.target.value
        self.$emit('input', event.target.value)
      }
    }
  })
}

这就是深入底层要付出的,尽管麻烦了一些,但相对于v-model来说,你可以更灵活地控制

事件&按键修饰符

对于.passive、.capture和.once事件修饰符, Vue提供了相应的前缀可以用于on:

Modifier(s) Prefix
.passive &
.capture !
.once ~
.capture.once or .once.capture ~!

例如:

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  `~!mouseover`: this.doThisOnceInCapturingMode
}

对于其他的修饰符,前缀不是很重要,因为你可以直接在事件处理函数中使用事件方法:

Modifier(s) Equivalent in Handler
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target !== event.currentTarget) return
Keys:.enter,.13 if (event.keyCode !== 13) return (change 13 to another key code for other key modifiers)
Modifiers Keys:.ctrl,.alt,.shift,.meta if (!event.ctrlKey) return (change ctrlKey to altKey, shiftKey, or metaKey, respectively)

这里是一个使用所有修饰符的例子:

on: {
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是enter键或者没有同时按下shift键则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }
}

插槽

你可以从this.$slots获取VNodes列表中的静态内容:

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

还可以从this.$scopedSlots中获得能用作函数的作用域插槽,这个函数返回VNodes:

render: function (createElement) {
  // `<div><slot :text="msg"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.msg
    })
  ])
}

如果要用渲染函数向子组件中传递作用域插槽,可以利用VNode数据中的scopedSlots域:

render (createElement) {
  return createElement('div', [
    createElement('child', {
      // pass `scopedSlots` in the data object
      // in the form of { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

JSX

如果写了很多render函数,可能会觉得痛苦:

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)

特别是模板如此简单的情况下:

<anchored-heading :level="1">
  <span>Hello</span> world!
</anchored-heading>

这就是为什么会有一个Babel插件,用于在Vue中使用JSX语法的原因,它可以让我们回到更接近于模板的语法上

import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
  el: '#demo',
  render (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

将h作为createElement的别名是Vue生态系统中的一个通用惯例,实际上也是JSX所要求的,如果在作用域中h失去作用,在应用中会触发报错

函数式组件

之前创建的锚点标题组件比较简单,没有管理或监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。在这个例子中,我们标记组件为functional,这意味它是无状态(没有data),无实例(没有this上下文)。一个函数式组件就像这样:

Vue.component('my-component', {
  functional: true,
  // 为了弥补缺少的实例,提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  },
  // Props 可选
  props: {
    // ...
  }
})

注意:在2.3.0之前的版本中,如果一个函数式组件想要接受props,则props选项是必须的。在2.3.0或以上的版本中,可以省略props选项,所有组件上的属性都会被自动解析为props

组件需要的一切都是通过上下文传递,包括:

props:提供props的对象

children: VNode子节点的数组
slots: slots对象
data:传递给组件的data对象
parent:对父组件的引用
listeners: (2.3.0+)一个包含了组件上所注册的v-on侦听器的对象。这只是一个指向data.on的别名。
injections: (2.3.0+)如果使用了 inject 选项,则该对象包含了应当被注入的属性。

在添加functional: true之后,锚点标题组件的render函数之间简单更新增加context参数,this.$slots.default更新为context.children,之后this.level更新为context.props.level

因为函数式组件只是一个函数,所以渲染开销也低很多。然而,对持久化实例的缺乏也意味着函数式组件不会出现在Vue devtools的组件树里。在作为包装组件时它们也同样非常有用,比如,当你需要做这些时:程序化地在多个组件中选择一个,在将children, props, data传递给子组件之前操作它们。

下面是一个依赖传入props的值的smart-list组件例子,它能代表更多具体的组件:

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
  functional: true,
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items
      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList
      return UnorderedList
    }
    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  },
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  }
})

slots()和childre对比

你可能想知道为什么同时需要slots()和children。slots().default不是和children类似的吗?但是如果是函数式组件和下面这样的children呢?

<my-functional-component>
  <p slot="foo"> first </p>
  <p>second</p>
</my-functional-component>

对于这个组件,children会给你两个段落标签,而slots().default只会传递第二个匿名段落标签,slots().foo会传递第一个具名段落标签。同时拥有children和slots(),因此你可以选择让组件通过slot() 系统分发或者简单的通过children接收,让其他组件去处理

模板编译

你可能有兴趣知道,Vue的模板实际是编译成了render函数。这是一个实现细节,通常不需要关心,但如果你想看看模板的功能是怎样被编译的,下面是一个使用Vue.compile来实时编译模板字符串的简单demo:

<div>
  <header> <h1>I'm a template!</h1> </header>
  <p v-if="message"> {{ message }} </p>
  <p v-else> No message. </p>
</div>   

render:

function anonymous() {
  with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}  

staticRenderFns:

_m(0): function anonymous() {
  with(this){return _c('header',[_c('h1',[_v("I'm a template!")])])}
}  

插件

开发插件

1.添加全局方法或者属性,如:vue-custom-element

2.添加全局资源:指令/过滤器/过渡等,如vue-touch

3.通过全局mixin方法添加一些组件选项,如:vue-router

4.添加Vue实例方法,通过把它们添加到Vue.prototype上实现。

5.一个库,提供自己的API,同时提供上面提到的一个或多个功能,如vue-router

Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象:

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

使用插件

通过全局方法Vue.use()使用插件:

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

也可以传入一个选项对象:

Vue.use(MyPlugin, { someOption: true })

Vue.use会自动阻止注册相同插件多次,届时只会注册一次该插件

Vue.js官方提供的一些插件(例如vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。然而在例如CommonJS的模块环境中,你应该始终显式地调用Vue.use():

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

过滤器

Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示:

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数总接收表达式的值(之前的操作链的结果)作为第一个参数。在这个例子中,capitalize过滤器函数将会收到message的值作为第一个参数

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联:

{{ message | filterA | filterB }}

filterA被定义为接收单个参数的过滤器函数,表达式message的值将作为参数传入到函数中,然后继续调用同样被定义为接收单个参数的过滤器函数filterB,将filterA的结果传递到filterB中。过滤器是JavaScript函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数,普通字符串'arg1'作为第二个参数,表达式arg2取值后的值作为第三个参数

网友评论

登录后评论
0/500
评论
webmirror
+ 关注